RN中的navigation的使用方式 demo

在终端中下载下来相关联的依赖库npm install react-navigation --save  运行时npm install

在终端下载tab使用库  npm install react-native-tab-navigator - -save

导入头  然后看代码

/**  index.android.js

* Sample React Native App

* https://github.com/facebook/react-native

* @flow

*/

import React, {Component }from'react';

import {

  AppRegistry,

  StyleSheet,

  Text,

  View,

  Image,

  Button

} from'react-native';

import {

  StackNavigator

}from'react-navigation';

import ThreeScreenfrom'./Three.js';

class HomeScreenextendsReact.Component {

static navigationOptions= {

title: 'Welcome',

};

render() {

const { navigate }=this.props.navigation;

return (

<View>

<Text>Hello, Chat App!</Text>

<Button

onPress={()=>navigate('Chat')}

title="Chat with Lucy"

/>

</View>

);

}

}

class ChatScreenextendsReact.Component {

static navigationOptions= {

title: 'Chat with Lucy',

};

render() {

const { navigate }=this.props.navigation;

return (

<View>

<Text>Chat with Lucy</Text>

<Button

onPress={()=>navigate('Three')}

title="to to ThreeScreen"

/>

</View>

);

}

}

const SimpleApp=

StackNavigator({

Home: { screen:HomeScreen },

Chat: { screen:ChatScreen },

Three: { screen:ThreeScreen},

});

var styles=StyleSheet.create ({

  wrapper: {

    height:80,

},

slide: {

    height:80,

    resizeMode:Image.resizeMode.contain,

},

});

AppRegistry.registerComponent('test', ()=>SimpleApp);

另一个界面中的代码Three.js

import React,{Component}from'react';

import {

AppRegistry,

Text,

View,

Button,

} from'react-native';

class Three extendsReact.Component {

static navigationOptions = {

title: 'Three Sceen',

};

render() {

const { goBack } =

this.props.navigation;

return (

<Button

title="Go back"

onPress={()=>goBack()}

/>

);

}

}

export default Three;//导出Three  让别的导入时可以找到

自己摸索，如果不对，谢谢大家前来留言指导。