react-native Navigation使用一
发布时间:2020-12-15 06:39:46 所属栏目:百科 来源:网络整理
导读:本篇博客只是翻译记录一下 初始化项目 react-native init pro_name // pro_name是你自己的项目名称 然后需要加入navigation npm install --save react-navigation 这时候运行react-native run-android可能会报错,说不认识run-android命令 就需要执行 yarn a
本篇博客只是翻译记录一下 初始化项目 react-native init pro_name // pro_name是你自己的项目名称 然后需要加入navigation npm install --save react-navigation 这时候运行react-native run-android可能会报错,说不认识run-android命令 就需要执行 yarn add react-navigation命令,然后再执行react-native run-android就好了。 上图,图不是很清晰,找来找去没找到好的录制gif的应用
首先是Index.js文件 import { AppRegistry } from 'react-native'; import App from './App'; AppRegistry.registerComponent('navigation_pro1',() => App);然后是App.js文件 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { Platform,StyleSheet,Text,View } from 'react-native'; import { StackNavigator } from 'react-navigation'; import HomeScreen from './js/HomeScreen'; import ChatScreen from './js/ChatScreen'; const SimpleApp = StackNavigator({ Home: { screen: HomeScreen },Chat: { screen: ChatScreen } }); export default class App extends Component < {} > { render() { return <SimpleApp / > ; } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,});然后是HomeScreen.js文件 import React,{ Component } from 'react'; import { Platform,View,Button } from 'react-native'; import {StackNavigator} from 'react-navigation'; export default class HomeScreen extends Component{ static navigationOptions={ title:'Welcome' }; render(){ const {navigate}=this.props.navigation; return ( <View> <Text>Hello,Navigation!</Text> <Button onPress={()=> navigate('Chat',{user: '小明'})} title='Chat with Lucy' /> </View> ); } }最后是ChatScreen.js文件 import React,{ Component } from 'react'; import { Text,View } from 'react-native'; import { StackNavigator } from 'react-navigation'; export default class ChatScreen extends Component { static navigationOptions = ({ navigation }) => ({ title:`Chat with ${navigation.state.params.user}` }); render() { const { params } = this.props.navigation.state; return ( < View > < Text > 我是ChatScreen页面 { params.user } < /Text> < /View> ); } } 一定要注意js的路径。 另外英语好的兄弟可以直接看文档 点击打开链接 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |