我要评论安装最新版本：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….
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论