react native页面之间花式跳转

1，A页面跳转到B，B跳转到C，C跳转到D。要求：在B页面上方无返回按钮，C、D页面都有返回按钮。且B返回A页面，C返回B，D返回C。
 A.js
import    B  from  ' ./B';
import    C  from  './C';
import    D  from  './D';
<TouchableOpacity 
 onPress={this.props.navigation.navigate("B")  >
 export default  createStackNavigator({
     A: {  screen:A   }
     B: {  screen:B   }
    C: {  screen:C   }  
     D: {  screen:D   }  
}  )

B.js
<TouchableOpacity 
 onPress={this.props.navigation.push("C") >      //不需要导入import，也不需要createStackNavigator

C.js
<TouchableOpacity 
 onPress={this.props.navigation.push("C") >     //同B一样

效果图：


总结：这里的关键是，this.props.navigation.navigate和this.props.navigation.push的区别；前者表示谁定义了它（createStackNavigator)，就返回到这个页面，后者表示从谁那里跳转过来的  (谁调用了this.props)，就返回到哪里去。

2，B页面有底部导航（createMaterialBottomNavigator)，可以切换页面。并且同时有页面跳转(createStackNavigator)到C页面的功能：
   B.js:
const  bottomTab=createMaterialBottomNavigator({
     B1: { screen:  B1},
     B2: { screen:  B2},
     B3: { screen:  B3},
})

export  default   createStackNavigator({
    bottomTab:{screen:  bottomTab },      //将底部导航嵌入到堆栈导航中即可
    C: {screen: C },
})

效果图：

                   

为了突出重点，关键的字和图留着，其他都码掉，这样应该看的很明白了。