一定要参考官网:

https://reactnavigation.org/docs/en/getting-started.html

代码来自慕课网:https://www.imooc.com/course/list?c=reactnative

效果图:

流程:

1.新建项目

2.修改依赖 (一定要注意版本, 好像其他版本会报各种错误) , 执行 yarn 或者 npm install 安装依赖

"dependencies": {
"@types/react": "^16.9.2",
"react": "16.8.6",
"react-native": "^0.60.0",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.2.0",
"react-navigation": "^3.0.0"
},

3. 按照官网步骤配置ios / android

4. 最终代码 navigators文件夹下AppNavigators.js 。pages文件夹下是各个页面。

index.js

import {AppRegistry} from 'react-native';
import App from './navigators/AppNavigators';
import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App);

AppNavigators.js

import React from 'react'; //只要在页面中使用了基础组件 都需要导入这句话 不然会报错
import {Button} from 'react-native';
import { createStackNavigator,createAppContainer } from 'react-navigation';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
import Page3 from '../pages/Page3';
import Page4 from '../pages/Page4';
import Page5 from '../pages/Page5'; const AppStackNavigator = createStackNavigator({
HomePage: {
screen: HomePage
},
Page1: {
screen: Page1,
navigationOptions: ({navigation}) => ({
title: `${navigation.state.params.name}页面名`//动态设置navigationOptions
})
},
Page2: {
screen: Page2,
navigationOptions: {//在这里定义每个页面的导航属性,静态配置
title: "This is Page2.",
}
},
Page3: {
screen: Page3,
navigationOptions: (props) => {//在这里定义每个页面的导航属性,动态配置
const {navigation} = props;
const {state, setParams} = navigation;
const {params} = state;
return {
title: params.title ? params.title : 'This is Page3',
headerRight: (
<Button
title={params.mode === 'edit' ? '保存' : '编辑'}
onPress={()=>{setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
}
/>
),
}
}
},
}, {
defaultNavigationOptions: {
// header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
}
}); const App = createAppContainer(AppStackNavigator)
export default App

HomePage.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/ import React, {Fragment,Component} from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';
type Props = {};
export default class HomePage extends Component<Props> { //修改Back按钮
static navigationOptions={
title:'Home',
headerBackTitle:'返回哈哈'
} render(){
const {navigation}=this.props; return (
<View style={styles.container}>
<Text style={styles.welcome}>欢迎来到HomePage</Text> <Button
title={'去 Page1'}
onPress={()=>{
navigation.navigate('Page1',{name:'动态的'});
}}
/> <Button
title={'去 Page2'}
onPress={()=>{
navigation.navigate('Page2');
}}
/> <Button
title={'去 Page3'}
onPress={()=>{
navigation.navigate('Page3',{name:'Dev iOS'});
}}
/> </View>
);
}
} const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign: 'center',
} });

Page1.js


/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/


import React, {Fragment,Component} from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';


export default class Page1 extends Component {


render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>欢迎来到Page1</Text>
<Button
title={'Go Back'}
onPress={()=>{


this.props.navigation.goBack();
}}
/>


<Button
title={'去Page4'}
onPress={()=>{
this.props.navigation.navigate('Page4');
}}
/>


</View>
);
}
}


const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign: 'center',
}


});

 

Page2.js


/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/


import React, {Fragment,Component} from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';


export default class Page2 extends Component {


render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>欢迎来到Page2</Text>
<Button
title={'Go Back'}
onPress={()=>{
this.props.navigation.goBack();
}}
/>


<Button
title={'去Page4'}
onPress={()=>{
this.props.navigation.navigate('Page4');
}}
/>


</View>
);
}
}


const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign: 'center',
}


});

 

Page3.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/ import React, {Fragment,Component} from 'react';
import {
StyleSheet,
View,
Text,
Button,
TextInput,
} from 'react-native'; export default class Page3 extends Component { render(){
const {navigation}=this.props;
const {state, setParams} = navigation;
const {params} = state;
const showText=params&&params.mode==='edit'?'正在编辑':'编辑完成' return (
<View style={styles.container}>
<Text style={styles.welcome}>欢迎来到Page3</Text>
<Text style={styles.welcome}>{showText}}</Text>
<TextInput
style={styles.input}
onChangeText={
text=>{
setParams({title:text})
}
}
/>
<Button
title={'Go Back'}
onPress={()=>{
navigation.goBack();
}}
/> <Button
title={'去Page4'}
onPress={()=>{
navigation.navigate('Page4');
}}
/> </View>
);
}
} const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign: 'center',
},
input:{
height:50,
borderWidth:1,
marginTop:10,
borderColor:'black'
} });

Page4.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/ import React, {Fragment,Component} from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native'; import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen'; const Page4 = () => {
return (
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
{global.HermesInternal == null ? null : (
<View style={styles.engine}>
<Text style={styles.footer}>Engine: Hermes</Text>
</View>
)}
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>See Your Changes</Text>
<Text style={styles.sectionDescription}>
<ReloadInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Debug</Text>
<Text style={styles.sectionDescription}>
<DebugInstructions />
</Text>
</View>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Learn More</Text>
<Text style={styles.sectionDescription}>
Read the docs to discover what to do next:
</Text>
</View>
<LearnMoreLinks />
</View>
</ScrollView>
</SafeAreaView>
</Fragment>
);
}; const styles = StyleSheet.create({
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
position: 'absolute',
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
}); export default Page4;

Page5.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/ import React, {Fragment,Component} from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native'; export default class Page5 extends Component { render(){
return (
<View style={styles.container}>
<Text style={styles.welcome}>欢迎来到Page5</Text>
<Button
title={'Go Back'}
onPress={()=>{
navigation.goBack();
}}
/> <Button
title={'去Page4'}
onPress={()=>{
navigation.navigate('Page4');
}}
/> </View>
);
}
} const styles=StyleSheet.create({
container:{
flex:1,
},
welcome:{
fontSize:20,
textAlign: 'center',
} });

可能会用到的命令:

npm install react-navigation
//指定版本安装法: npm install react-navigation@2.0.0 --save
npm install react-native-gesture-handler
react-native link
react-native run-ios npm install react-navigation@3.0.0 --save
yarn add react-native-gesture-handler
react-native link npm uninstall react-navigation --save npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install --save react-native@0.59.0(根据自己的需求版本) 按照官方步骤:
yarn add react-navigation
yarn add react-native-gesture-handler react-native-reanimated cd ios
pod install
cd .. react-native link react-native-reanimated
react-native link react-native-gesture-handler

出现的问题:

import App from './App'; // 不要加括号{}

React Native 之导航栏的更多相关文章

  1. [RN] React Native 自定义导航栏随滚动渐变

    React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

  2. React Native自定义导航栏

    之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了 ...

  3. React Native 底部导航栏

    首先安装:npm install react-native-tab-navigator   然后再引入文件中    import TabNavigator from 'react-native-tab ...

  4. React Native自定义导航条

    Navigator和NavigatorIOS 在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换.在React Native中RN为我们提供了两个组件:Navigator ...

  5. react native底部tab栏切换

    1.安装tab栏插件 npm i react-native-tab-navigator --save 2.引入对应的组件和tab插件 import { Platform, StyleSheet, Te ...

  6. React Native填坑之旅--Navigation篇

    React Native的导航有两种,一种是iOS和Android通用的叫做Navigator,一种是支持iOS的叫做NavigatorIOS.我们这里只讨论通用的Navigator.会了Naviga ...

  7. H5、React Native、Native应用对比分析

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...

  8. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  9. React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...

随机推荐

  1. 【Linux 应用编程】文件IO操作 - 常用函数

    Linux 系统中的各种输入输出,设计为"一切皆文件".各种各样的IO统一用文件形式访问. 文件类型及基本操作 Linux 系统的大部分系统资源都以文件形式提供给用户读写.这些文件 ...

  2. 【转载】PHP中foreach的用法

    http://www.php.cn/php-weizijiaocheng-399438.html 很好用的PHP中foreach的用法详解,收藏!

  3. Go语言入门篇-环境准备

    一.GO语言特点 静态类型:首先要明确变量类型,如上所示. 编译型:指GO语言要被编译成机器能识别机器代码. GO语言开源. 编程范式:支持“函数式”和“面向对象” GO语言原生的支持并发编程:即GO ...

  4. 20191128 Spring Boot官方文档学习(9.11-9.17)

    9.11.消息传递 Spring Boot提供了许多包含消息传递的启动器.本部分回答了将消息与Spring Boot一起使用所引起的问题. 9.11.1.禁用事务JMS会话 如果您的JMS代理不支持事 ...

  5. Service-Oriented Architecture,SOA(转)

    http://blog.csdn.net/WOOSHN/article/details/8036910 介绍: IT体系结构已非常成熟,它是一种成功处理典型IT问题的方法.体系结构中一个受到很大重视且 ...

  6. uwsgi + nginx 部署python项目(二)

    实现负载均衡 开启两个服务器,nginx负责分发请求到两个服务器,以减轻单个服务器负担. 配置uwsgi服务器 在a项目目录下生成uwsgi.ini文件,在b项目目录下生成uwsgi.ini文件,如何 ...

  7. kafka生产者java客户端

    producer 包含一个用于保存待发送消息的缓冲池,缓冲池中消息是还没来得及传输到kafka集群的消息. 位于底层的kafka I/O线程负责将缓冲池中的消息转换成请求发送到集群.如果在结束prod ...

  8. roslyn\csc.exe

    vs2019调试运行时提示roslyn\csc.exe错误时在nuget包管理器控制台里输入:  Update-Package Microsoft.CodeDom.Providers.DotNetCo ...

  9. .Net Core - 使用Supervisor进行托管部署

    环境 CentOS 7 x64,详见 安装CentOS7虚拟机 .Net Core 2.1.801 详见 CentOS 7 下安装.NET Core SDK 2.1 ftp  详见  CentOS7 ...

  10. Java 线程池 8 大拒绝策略,面试必问!

    前言 谈到java的线程池最熟悉的莫过于ExecutorService接口了,jdk1.5新增的java.util.concurrent包下的这个api,大大的简化了多线程代码的开发.而不论你用Fix ...