react-native统一入口界面,并实现页面的跳转

前几篇的react-native相关博客,写到简书上了,发现代码的排版不好,不美,所以又回来了.

先简单的说一下统一,入口页面的代码,大家都知道react-native的强大在与一套代码多终端运行, 但是大家init react-native项目的时候,默认的是两个入口界面Android和ios的:

index.android.js        index.ios.js .而且这两个js文件中的代码是一毛一样的,这样貌似不是一套代码啊, 那么我们该如何把他统一成一套代码呢?

1.首先在根目录创建一个App.js文件,里面内容就是页面代码.e.g.:

export default class App extends Component {
    render() {
        return (
            <View >
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
            </View>
        );

    }

}

2.index.android.js 和index.ios.js统一修改如下:

AppRegistry.registerComponent('myrn', () => App);

注意:别忘了导包,

至此工作完成,以后就可以用一套代码来在Android和ios上运行了.

二,页面跳转.

使用react-navigation进行页面跳转导航,

而且这也是官方以后主推的导航库,用法十分简单,方便.

至于用法,自己百度去吧,这里只是简单的说一下,结合上部分如何实现跳转.

两个页面文件:App.js  ChatScreen.js.

App.js:

export default class App extends Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <Button title="OnClick" onPress={() => navigate('Chat')}/>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
            </View>
        );

    }
}

ChatScreen.js:

export default class ChatScreen extends Component {
    static navigationOptions = {
        title: 'ChatScreen',
    };
    render() {
        return (
            <View >
                <Text>ChatScreen界面</Text>
            </View>
        );
    }
}

最后是index.android.js和index.ios.js文件,内容一样.

const appNav = StackNavigator({
    app: { screen: app },
    Chat: { screen: ChatScreen },
});

AppRegistry.registerComponent('myrn', () => appNav);

此处比原来多的代码是把页面添加到StackNavigator中,并注册.

ok,完 了,That's all.