美文网首页
React-native 中StackNavigator导航栏

React-native 中StackNavigator导航栏

作者: Smith_Frank | 来源:发表于2018-12-26 15:29 被阅读0次

本人也是一个react-native的小白一个,公司要求用用react-native写APP的项目,望大牛指点,自己也记录一下自己的成长 不废话了上代码

import {
    AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import page1 from "./views/page1"
import page2 from "./views/page2";//导入你需要导航的页面
import page3 from './views/page3'

const SimpleAppNavigator = StackNavigator({
    page1 : {
        screen: page1,
        navigationOptions:{
            header:null,//进入的首页是不需要导航条的
        }
    },
    page2: {
        screen: page2,
        navigationOptions: ({navigation}) => ({
            headerTitle : "第二个页面”
    })},
    page3: {
        screen: page3,
        navigationOptions: ({navigation}) => ({
            headerTitle : "第三个页面”
    })},
},{
    initialRouteName: 'page1', // 初始显示的界面
    onTransitionStart: ()=>{
        // ToastAndroid.show('导航栏切换开始', ToastAndroid.SHORT);
    },  // 回调
    onTransitionEnd: ()=>{
        // ToastAndroid.show('导航栏切换结束', ToastAndroid.SHORT);
    },  // 回调
});

AppRegistry.registerComponent('SimpleApp', () => SimpleAppNavigator);
//这里注册到AppRegistry里面就可以了

这里我就没有上page的代码了毕竟是最基础的,第一次写文章,希望以后经常记录一下

相关文章

网友评论

      本文标题:React-native 中StackNavigator导航栏

      本文链接:https://www.haomeiwen.com/subject/czmhlqtx.html