React Navigation实现两个文件界面跳转

先来看看效果

在这里我是分开两个文件来写这两个界面的，直接上代码：

FirstPage.js文件：

import React, { Component } from 'react';import SecondPage from './pages/FlashPage';import {    StackNavigator,    TabNavigator,} from 'react-navigation';import {    AppRegistry,    View,    Button,} from 'react-native';export default class FirstPage extends Component {    static navigationOptions = {        title: 'Welcome',    };    render(){        const {navigate} = this.props.navigation;        return(            <View>                <Button                    onPress={() => navigate('FlashPage')}                    title="Chat with Lucy"                />            </View>        );    }}const App = StackNavigator({    FirstPage: {screen: FirstPage},    SecondPage: {screen: SecondPage},});AppRegistry.registerComponent('FirstPage', () => App);

然后是SecondPage.js文件：

import React, { Component } from 'react';import {    View,    Text,} from 'react-native';export default class SecondPage extends React.Component{    static navigationOptions = {        title: 'Chat with Lucy',    };    render(){        // const {navigate} = this.props.navigation;        return(            <View>                <Text>Chat with Lucy</Text>            </View>        )    }}
这里有几个要注意的点：
1.在FirstPage.js文件中
const App = StackNavigator({    FirstPage: {screen: FirstPage},    SecondPage: {screen: SecondPage},});
语句一定要放在
export default class FirstPage extends Component 
方法的下面，不然会出现未定义的问题。
2.两个文件要加
export default
不然会提示 must be a a react component 的错误
3.注意名称不要写错