一定要参考官网:

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. c++读取utf-8格式中英文混合string

    最近项目中用到需要给出每一个字在string中的索引,但是又因为中文字符跟英文字符长度不一样,得分开处理, 在这里记录一下. 想要达到的效果如下: 将 “测试3.1415engEng”分割开 代码: ...

  2. 【ABAP系列】SAP ABAP smartforms设备类型CNSAPWIN不支持页格式ZXXX

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP smartfo ...

  3. 红帽学习笔记[RHCSA] 第二课[文件、目录、相关命令]

    第二课 常用的目录结构与用途 / 根目录 /boot 存储的是系统起动时的信息和内核等 /dev 存储的是设备文件 /etc 存储的是系统的配置文件 /root 存储的是root用户的家目录 /hom ...

  4. Hive-生成一个大文件(小文件合并)

    set hive.execution.engine=mr; --在 map-reduce 作业结束时合并小文件.如启用,将创建 map-only 作业以合并目标表/分区中的文件. set hive.m ...

  5. Python模块unittest

    Python自带一个单元测试框架,unittest模块,用它来做单元测试,它里面封装好了一些校验返回结果的方法和一些用例执行前的初始化操作 在说unittest之前,先说几个概念: TestCase: ...

  6. c++多线程并发学习笔记(2)

    等待一个时间或其他条件 在一个线程等待完成任务时,会有很多选择: 1. 它可以持续的检查共享数据标志(用于做保护工作的互斥量),直到另一个线程完成工作时对这个标志进行重设.缺点:资源浪费,开销大 2. ...

  7. 7.golang的字符串 string

    golang 字符串为不可变的量 ,字符串定义要使用双引号 package main import "fmt" func main() { var xx string = 'xxx ...

  8. mac下安装php zookeeper扩展

    安装步骤 php-zookeeper依赖libzookeeper,所以需要先安装libzookeeper 安装libzookeeper cd /usr/local/src/ wget http://m ...

  9. nodejs版实现properties后缀文件解析

    1.propertiesParser.js let readline = require('readline'); let fs = require('fs'); // properties文件路径 ...

  10. SCAU_WeiShenWahle 之省赛任务

    每一项按顺序理解之后裸敲,每个代码最多15分钟,用模板题来测,超过15分钟算未理解 线段树 平衡树( Treap , sbt , spt ) #include <iostream> #in ...