reactnative外掛react-navigation使用心得

sleep123發表於2017-08-29

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>
    )
  }
}


相關文章