效果:
首先,在项目目录下,安装react-navigation库:
npm install --save react-navigation
具体代码实现:
index.android.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import {
AppRegistry,
} from 'react-native';
import rootApp from './js/rootApp'
AppRegistry.registerComponent('GankProject', () => rootApp);
rootAp.js:
/**
* Created by Administrator on 2017/3/31 0031.
*/
'use strict'
import React from 'react';
import {
AppRegistry,
Text,View,Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ChatScreen from './ChatScreen';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',//设置标题内容
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Navigation!</Text>
<Button
onPress={() => navigate('Chat',{user:'Lucy'})}
title="Chat with Lucy"/>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: {screen: HomeScreen},
Chat:{screen:ChatScreen},
});
export default SimpleApp;
navigate('Chat',{user:'Lucy'})} 意思说:跳转到Chat指的组件,并且带过去的参数key是user,value是Lucy。
ChatScreen.js:
/**
* Created by Administrator on 2017/3/31 0031.
*/
'use strict'
import React,{Component} from 'react';
import {View,Text} from 'react-native';
class ChatScreen extends Component{
static navigationOptions = {
title:'Chat with Lucy',
};
render(){
const {params} = this.props.navigation.state;
return(
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
export default ChatScreen;
{params.user}意思是接收前面传过来的值,user是前面的key。
参考资料:https://reactnavigation.org/docs/intro/