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 ThreeScreen from './Three.js' ;

class HomeScreen extends React . 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 ChatScreen extends React . 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 extends React . Component {

static navigationOptions = {

title: 'Three Sceen' ,

};

render () {

const { goBack } =

this . props . navigation ;

return (

< Button

title = "Go back"

onPress = {() => goBack ()}

/>

);

}

}

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

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