React-native 中StackNavigator导航栏

本人也是一个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的代码了毕竟是最基础的,第一次写文章,希望以后经常记录一下

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容