加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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的路径。

另外英语好的兄弟可以直接看文档

点击打开链接

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读