react native插件 react-navigation使用心得

StackNavigator

StackNavigator(screens,configs)
const Stack = StackNavigator({
  Home: {
    screen: Home,
  },
  Profile: {
    screen: Profile
  }
},{
    mode: 'card',  // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 回调
    onTransitionEnd: ()=>{ console.log('导航栏切换结束'); }  // 回调
});

screen页面

export default class Home extends React.Component {
  //本页面的属性配置
  static navigationOptions = {
    title: 'Home',
  }
  render() {
    return (
      <View>
        <Text>Home</Text>
      </View>
    )
  }
}
上一篇:关于参数的接收|学习笔记


下一篇:Android 禁止Viewpager左右滑动功能