React-Navigation使用实例

安装最新版本：npm install –save react-navigation 在App.js中引入StackNavigator依赖库，并且注册需要跳转的界面

//引入react-navigation依赖库
import {
    StackNavigator,
} from 'react-navigation';

//展示的页面
import MainPage from './view/MainPage';
import newsList from './view/newsList';
import BasicInfo from './view/BasicInfo';

export default App = StackNavigator({
    //每一个页面的配置
    MainPage: {
        screen: MainPage
          },
    newsList: {
        screen: newsList
        },
    BasicInfo: {
        screen: BasicInfo
      },

});

3.在MainPage页面，配置title,添加按钮，onPress触发跳转，其中跳转的页面需在App中注册

class MainPage extends Component{
  static navigationOptions = {
    title: 'Home',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
      <Button
      //第一个参数为跳转到的界面，第二个为传入的参数
        onPress = {()=> navigate('newsList',{name:'Bob'})}
        title = "Go to "
      />
      </View>
    );
  }

}

4.在跳转之后的界面获取传递的参数并显示

class newsList extends Component{
  static navigationOptions = {
    title: 'newsList',
  };
  render(){
    const {params} = this.props.navigation.state;
    return (
      
          
              Hello {params.name}
          
      
    );
  }
}

持续TabNavigator….