/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { AppRegistry,Button,StyleSheet,Text,View } from 'react-native'; import { StackNavigator } from 'react-navigation'; import MainScreen from './src/MainScreen'; import ProfileScreen from './src/ProfileScreen' export default class Tmic extends Component { static navigationOptions ={ title:'Tmic',}; render() { const { navigate } = this.props.navigation; return ( <View style={styles.container}> <Button title='Tmic' onPress={()=>{ navigate('Main') }}></Button> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},}); const SimpleApp = StackNavigator({ Home:{screen:Tmic},Main:{screen:MainScreen},Pro:{screen:ProfileScreen},}) AppRegistry.registerComponent('Tmic',() => SimpleApp);
import React,{ Component } from 'react'; import {Button} from "react-native"; export default class MainScreen extends Component{ render(){ const { navigate } = this.props.navigation; return( <Button title='MainScreen' onPress={()=>{ navigate('Pro'); }} ></Button> ); } }
import React,{ Component } from 'react'; import {Text} from "react-native"; export default class ProfileScreen extends Component{ render(){ return( <Text>6666666666</Text> ); } }
实现三个页面的跳转
记得在项目根目录下添加:
1,
npm install --save react-navigation
2,
yarn add react-navigation
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。