- react-native-vector-icons的配置及使用
- 配置Android运行环境
- react-navigation V4的配置和使用
#1 react-native-vector-icons的配置及使用
react-native-vector-icons 最常用的矢量图标库
|
1 |
react-native-vector-icons |
然后进行iOS的配置，将下面的代码拷贝至iOS/项目名/Info.plist中，注意放在一个<String>标签的下一行，要不然会出错
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<key>UIAppFonts</key> <array> <string>AntDesign.ttf</string> <string>Entypo.ttf</string> <string>EvilIcons.ttf</string> <string>Feather.ttf</string> <string>FontAwesome.ttf</string> <string>FontAwesome5_Brands.ttf</string> <string>FontAwesome5_Regular.ttf</string> <string>FontAwesome5_Solid.ttf</string> <string>Foundation.ttf</string> <string>Ionicons.ttf</string> <string>MaterialIcons.ttf</string> <string>MaterialCommunityIcons.ttf</string> <string>SimpleLineIcons.ttf</string> <string>Octicons.ttf</string> <string>Zocial.ttf</string> </array> |
然后在ios目录下执行
|
1 |
pod install |
接下来进行Android的配置，在android/app/build.gradle的第二行添加：
|
1 |
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" |
这样就完成了配置,注意要让配置生效需要重新运行一下。
在https://oblador.github.io/react-native-vector-icons/ 中有图标的子集可以对图标进行查找，根据这些子集导入我们需要使用子集进行导入：
|
1 |
import Ionicons from 'react-native-vector-icons/Ionicons'; |
然后根据名称进行使用：
|
1 |
<Ionicons name={'ios-add-circle'} size={50} style={{color: 'red'}} /> |
# 2 配置Android运行环境
接下来可以在Android上进行测试，下面说一下怎么在安卓模拟器上运行，我使用的是Mac进行开发，首先要安装Android Studio然后配置好的SDK和安装好模拟器，然后要在配置文件中export path，必须要进行这一步因为react-native run android这个命令会先运行emulator -list-avd检查模拟器安装没有，如果export path那么是不能够执行emulator命令的，直接在
|
1 2 3 4 |
# 使用的是zsh sudo vim ~/.zshrc # 使用的是bash sudo vim ~/.bash_profile |
然后添加以下的PATH：
|
1 2 3 |
<span class="kwd">export</span><span class="pln"> ANDROID_HOME</span><span class="pun">=</span><span class="str">/Users/</span><span class="pun">{</span><span class="pln">yourusername</span><span class="pun">}/</span><span class="typ">Library</span><span class="pun">/</span><span class="typ">Android</span><span class="pun">/</span><span class="pln">sdk </span><span class="kwd">export</span><span class="pln"> PATH</span><span class="pun">=</span><span class="pln">$ANDROID_HOME</span><span class="pun">/</span><span class="pln">platform</span><span class="pun">-</span><span class="pln">tools</span><span class="pun">:</span><span class="pln">$PATH </span><span class="kwd">export</span><span class="pln"> PATH</span><span class="pun">=</span><span class="pln">$ANDROID_HOME</span><span class="pun">/</span><span class="pln">tools</span><span class="pun">:</span><span class="pln">$PATH</span> |
这样添加在的路径是不会立即生效的，要source一下生效，接下来运行react-native run android和react-native run ios就可以了,有时候安卓模拟器在mac上会遇到黑屏，直接重新安装一个模拟器就好了。
#3 react-navigation V4的配置和使用
官网链接https://reactnavigation.org/docs/4.x/header-buttons注意这是V4的，现在最新的版本是V5，两者之间不兼容！
安装主库和依赖
|
1 2 3 4 5 6 |
yarn add react-navigation yarn add react-native-gesture-handler yarn add react-native-reanimated yarn add react-native-safe-area-context yarn add @react-native-community/masked-view yarn add react-native-screens |
然后配置ios
|
1 2 3 |
<span class="hljs-built_in">cd</span> ios pod install <span class="hljs-built_in">cd</span> .. |
然后配置安卓，在android/app/build.gradle中的dependencies添加react-native-screens的依赖
|
1 2 |
implementation <span class="hljs-string">'androidx.appcompat:appcompat:1.1.0-rc01'</span> implementation <span class="hljs-string">'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'</span> |
然后配置react-native-gesture-handler，在MainActivity.java中，文件有点深在这里：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span class="hljs-keyword">package</span> com.reactnavigation.example; <span class="hljs-keyword">import</span> com.facebook.react.ReactActivity; + <span class="hljs-keyword">import</span> com.facebook.react.ReactActivityDelegate; + <span class="hljs-keyword">import</span> com.facebook.react.ReactRootView; + <span class="hljs-keyword">import</span> com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; <span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ReactActivity</span> </span>{ <span class="hljs-meta">@Override</span> <span class="hljs-function"><span class="hljs-keyword">protected</span> String <span class="hljs-title">getMainComponentName</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">return</span> <span class="hljs-string">"Example"</span>; } + <span class="hljs-meta">@Override</span> + <span class="hljs-function"><span class="hljs-keyword">protected</span> ReactActivityDelegate <span class="hljs-title">createReactActivityDelegate</span><span class="hljs-params">()</span> </span>{ + <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> ReactActivityDelegate(<span class="hljs-keyword">this</span>, getMainComponentName()) { + <span class="hljs-meta">@Override</span> + <span class="hljs-function"><span class="hljs-keyword">protected</span> ReactRootView <span class="hljs-title">createRootView</span><span class="hljs-params">()</span> </span>{ + <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> RNGestureHandlerEnabledRootView(MainActivity.<span class="hljs-keyword">this</span>); + } + }; + } } |
最后在index.js或者App.js中导入react-native-gesture-handler来进行测试
|
1 |
import <span class="hljs-string">'react-native-gesture-handler'</span>; |
堆栈导航器
这是最常用的导航器，也就是从一个页面跳转到一个页面然后可以通过页面左上角的返回按钮回到之前的页面，如图
首先创建四个文件分别是主页和三个子页面：
主页：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import React from 'react'; import {Button, View, StyleSheet, Text} from 'react-native'; export default class HomePage extends React.Component { // 在这里定义页面的导航属性 static navigationOptions = { title: '首页', // 页面上方显示的标题 headerBackTitle: '返回标题', // 页面返回按钮的按键文字 安卓不支持 }; render() { const {navigation} = this.props; return ( <View style={{flex: 1, backgroundColor: 'blue', paddingTop: 30}}> <Text style={styles.text}>HomePage</Text> <Button title={'Go To Page1'} onPress={() => { navigation.navigate('Page1'); }} /> <Button title={'Go To Page2'} onPress={() => { navigation.navigate('Page2'); }} /> <Button title={'Go To Page3'} onPress={() => { navigation.navigate('Page3'); }} /> </View> ); } } const styles = StyleSheet.create({ text: { fontSize: 20, color: 'white', }, }); |
子页面：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React from 'react'; import {Button, View, StyleSheet, Text} from 'react-native'; export default class Page1 extends React.Component { render() { const {navigation} = this.props; return ( <View style={{flex: 1, backgroundColor: 'gray', paddingTop: 30}}> <Text style={styles.text}>PAGE1</Text> <Button title={'Go Back'} onPress={() => { navigation.goBack(); }} /> <Button title={'Go To Page2'} onPress={() => { navigation.navigate('Page2'); }} /> </View> ); } } const styles = StyleSheet.create({ text: { fontSize: 20, color: 'white', }, }); |
然后是重点，要创建一个导航器，然后整个应用的index.js是指向这个导航器的：
AppNavigator.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import React from 'react'; import {createAppContainer} from 'react-navigation'; import {createStackNavigator} from 'react-navigation-stack'; import Page1 from '../pages/Page1'; import Page2 from '../pages/Page2'; import Page3 from '../pages/Page3'; import HomePage from '../pages/HomePage'; // 创建导航器 export const AppStackNavigator = createStackNavigator( { Home: { screen: HomePage, }, Page1: { screen: Page1, }, Page2: { screen: Page2, }, Page3: { screen: Page3, }, }, { defaultNavigationOptions: { // 全局默认属性， 对当前导航所有页面有效 }, }, ); |
接下来把APP的启动页面指向这个导航器,index.js中默认是指向App.js的因此我们直接在app.js中将导航器指向上面创建的这个导航器，以后得整个应用都是基于这个导航器创建的
App.js
|
1 2 3 4 |
import {AppStackNavigator} from './navigators/AppNavigators'; import {createAppContainer} from 'react-navigation'; export default createAppContainer(AppStackNavigator); |
动态页面名的设置
进一步的深入理解StackNavigation传递参数，动态显示，对于Page1我们希望其页面名设置为动态，因此我们在AppNavigator.js中进行配置，如果navigation.state.params存在就显示navigation.state.params页面名
|
1 2 3 4 5 6 7 8 |
Page1: { screen: Page1, navigationOptions:({navigation}) => ( { title:`${navigation.state.params && navigation.state.params.name}页面名`, } ), }, |
然后需要在Page1的父级目录中通过navigation.navigate传递参数
|
1 2 3 4 5 6 |
<Button title={'Go To Page1'} onPress={() => { navigation.navigate('Page1',{name:'动态的'}); }} /> |
这样Page1就会显示从父级目录传递过来的页面名了，注意是通过navigation.state.params.xxxxx来取到的参数
页面传参及右上角按钮的设置
首先在AppNavigator.js中进行配置，通过headerRight进行设置，这里还是用参数传递来更改headerRight的文字
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Page3: { screen: Page3, navigationOptions:(props) => { const {navigation} = props; const {state, setParams} = navigation; const {params = {}} = state; return { title:params.name ? params.name : 'This is Page3', headerRight:( <Button title={params.mode === 'edit' ? '保存' : '编辑'} onPress={()=>{ setParams({mode:params.mode === 'edit' ? '' : 'edit'}); }}/> ), }; }, }, |
可以看到是通过传递了mode来进行的更改右上角的文字比列还通过name传递了标题，也就是navigation.state.prams.xxxx进行的更改，因此在HomePage跳转的时候传递name这个参数，mode这个参数使用Button的onPress来改变的
|
1 2 3 4 5 6 |
<Button title={'Go To Page3'} onPress={() => { navigation.navigate('Page3',{name:'Bing'}); }} /> |
所以在Page3中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import React from 'react'; import {Button, View, StyleSheet, Text, TextInput} from 'react-native'; export default class Page3 extends React.Component { render() { const {navigation} = this.props; const {state, setParams} = navigation; const {params} = state; const showText = params && params.mode === 'edit' ? '正在编辑' : '编辑完成'; return ( <View style={{flex: 1, backgroundColor: 'gray', paddingTop: 30}}> <Text style={styles.showText}>PAGE3</Text> <Text style={styles.text}>{showText}</Text> <Button title={'Go Back'} onPress={() => { navigation.goBack(); }} /> <Button title={'Go To Page2'} onPress={() => { navigation.navigate('Page2'); }} /> <TextInput style={styles.input} onChangeText={text=>{ setParams({name:text}); }} /> </View> ); } } const styles = StyleSheet.create({ text: { fontSize: 20, color: 'white', }, showText:{ marginTop: 20, fontSize: 20, color: 'red', }, input:{ height: 50, borderWidth: 1, marginTop: 10, borderColor: 'black', }, }); |
底部导航器
底部导航器通过createBottomTabNavigator进行创建，然后将Home的scree修改成创建的底部导航即可，关注一下代码中修改图标颜色的代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
import React from 'react'; import {createBottomTabNavigator} from 'react-navigation-tabs'; import {createStackNavigator} from 'react-navigation-stack'; import {Button, Text} from 'react-native'; import Ionicons from 'react-native-vector-icons/Ionicons'; import Page1 from '../pages/Page1'; import Page2 from '../pages/Page2'; import Page3 from '../pages/Page3'; import HomePage from '../pages/HomePage'; const BottomTabNavigator = createBottomTabNavigator( { Page1:{ screen:Page1, navigationOptions:{ tabBarLabel:'page1', tabBarIcon: ({tintColor, focused}) => ( <Ionicons name = {'ios-home'} size = {26} style={{color: tintColor}} /> ), }, }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel:({tintColor, focused})=>( // 默认状态下文字是和图表一样的颜色，这里进行自定义 <Text style={{color:focused ? 'orange' : 'grey'}}>Page2</Text> ), tabBarIcon: ({tintColor, focused}) => ( <Ionicons name = {'ios-people'} size = {26} style={{color: focused ? 'blue' : 'black'}} /> ), }, }, }, { tabBarOptions: { activeTintColor: 'red', }, } ); // 创建导航器 export const AppStackNavigator = createStackNavigator( { Home: { screen: BottomTabNavigator, navigationOptions:{ title:'底部导航', headerRight: null, }, }, Page1: { screen: Page1, navigationOptions:({navigation}) => ( { title:`${navigation.state.params && navigation.state.params.name}页面名`, } ), }, Page2: { screen: Page2, navigationOptions:{ title:'这是page2', header: null, }, }, Page3: { screen: Page3, navigationOptions:(props) => { const {navigation} = props; const {state, setParams} = navigation; const {params = {}} = state; return { title:params.name ? params.name : 'This is Page3', headerRight:( <Button title={params.mode === 'edit' ? '保存' : '编辑'} onPress={()=>{ setParams({mode:params.mode === 'edit' ? '' : 'edit'}); }}/> ), }; }, }, }, { defaultNavigationOptions: { // header: null // 全局默认属性， 对当前导航所有页面有效 }, }, ); |
顶部导航器：
顶部导航器使用createMaterialTopTabNavigator进行创建的，具体参考注释，这里的代码包含了顶部导航器和底部导航器，不是顶部导航器还是底部导航器都是在堆栈导航器的基础上加入的，堆栈导航器是所有导航器和页面的基础，在堆栈导航器screen如果导航器是个页面的话就是一个页面，如果是导航的话就是一个导航，很好理解其实就是component不同，注意一下导航器的这些配置
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
import React from 'react'; import {createBottomTabNavigator, createMaterialTopTabNavigator} from 'react-navigation-tabs'; import {createStackNavigator} from 'react-navigation-stack'; import {Button, Text} from 'react-native'; import Ionicons from 'react-native-vector-icons/Ionicons'; import Page1 from '../pages/Page1'; import Page2 from '../pages/Page2'; import Page3 from '../pages/Page3'; import HomePage from '../pages/HomePage'; const MaterialTopTabNavigator = createMaterialTopTabNavigator( { Page1:{ screen:Page1, navigationOptions:{ tabBarLabel:'page1', }, }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel:'page2', }, }, Page3:{ screen:Page3, navigationOptions:{ tabBarLabel:'page3', }, }, }, { tabBarOptions: { activeTintColor: 'red', tabStyle:{ minWidth: 50, }, upperCaseLabel: 'false', // 标签是否大写 默认是大写 style:{ backgroundColor:'#879', }, indicatorStyle:{ // 指示器的样式 height:2, backgroundColor:'white', }, labelStyle:{ // 文字的样式 fontSize: 13, marginTop: 6, marginBottom: 6, }, }, }); const BottomTabNavigator = createBottomTabNavigator( { Page1:{ screen:Page1, navigationOptions:{ tabBarLabel:'page1', tabBarIcon: ({tintColor, focused}) => ( <Ionicons name = {'ios-home'} size = {26} style={{color: tintColor}} /> ), }, }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel:({tintColor, focused})=>( // 默认状态下文字是和图表一样的颜色，这里进行自定义 <Text style={{color:focused ? 'orange' : 'grey'}}>Page2</Text> ), tabBarIcon: ({tintColor, focused}) => ( <Ionicons name = {'ios-people'} size = {26} style={{color: focused ? 'blue' : 'black'}} /> ), }, }, }, { tabBarOptions: { activeTintColor: 'red', }, } ); // 创建导航器 export const AppStackNavigator = createStackNavigator( { Home: { screen: HomePage, }, MaterialTopTabNavigator:{ screen:MaterialTopTabNavigator, navigationOptions:{ title:'顶部导航', }, }, BottomTabNavigator:{ screen: BottomTabNavigator, navigationOptions:{ title:'底部导航器', header: null, }, }, Page1: { screen: Page1, navigationOptions:({navigation}) => ( { title:`${navigation.state.params && navigation.state.params.name}页面名`, } ), }, Page2: { screen: Page2, navigationOptions:{ title:'这是page2', header: null, }, }, Page3: { screen: Page3, navigationOptions:(props) => { const {navigation} = props; const {state, setParams} = navigation; const {params = {}} = state; return { title:params.name ? params.name : 'This is Page3', headerRight:( <Button title={params.mode === 'edit' ? '保存' : '编辑'} onPress={()=>{ setParams({mode:params.mode === 'edit' ? '' : 'edit'}); }}/> ), }; }, }, }, { defaultNavigationOptions: { // header: null // 全局默认属性， 对当前导航所有页面有效 }, }, ); |
切换导航器 switchNavigator
切换导航器可以使从A页面切换到B页面，但是不能从B页面回到A页面，常用于登录页或者欢迎页
首先创建一个switchNavigator.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import {createSwitchNavigator} from 'react-navigation'; import {createStackNavigator} from 'react-navigation-stack'; import HomePage from '../pages/HomePage'; import Page1 from '../pages/Page1'; import Login from '../pages/Login'; const AppStack = createStackNavigator( { Home:{ screen: HomePage, }, Page1: { screen: Page1, }, } ); const AuthStack = createStackNavigator( { Login: { screen: Login, }, } ); export default createSwitchNavigator( { AuthStack: AuthStack, // 当只有screen一个属性的时候可以简写成下面的那种方式 App: { screen: AppStack, }, } ); |
可以看到在这个switchNavigator中包含两个StackNavigator，一个是登录页面，一个是我们APP的其他页面，我们希望从登录页面点击登录后跳转到App的其他页面之后就不能够跳回登录页面了。
Login.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React from 'react'; import {Button, View, StyleSheet, Text} from 'react-native'; export default class Login extends React.Component { render() { const {navigation} = this.props; return ( <View style={{flex: 1, backgroundColor: 'gray', paddingTop: 30}}> <Text style={styles.text}>Login</Text> <Button title={'登录'} onPress={() => { navigation.navigate('App'); }} /> </View> ); } } const styles = StyleSheet.create({ text: { fontSize: 20, color: 'white', }, }); |
可以看到Login.js中，我们通过navigation.navigate(‘App’);可以跳转到APP，最后在app.js的createAppContainer中将SwitchNavigator传入，可以看到登录之后到首页后不能够再返回首页了
抽屉导航器
创建侧拉抽屉：通过createDrawerNavigator进行创建，第二个参数是配置，通过ScrollView让侧面内容过多的时候可以滚动，通过SafeAreaView来适配刘海屏，更多的配置查看官方的文档，下面还结合了之前介绍的各种导航器,
appNavigator.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
import React from 'react'; import {createBottomTabNavigator, createMaterialTopTabNavigator} from 'react-navigation-tabs'; import {createStackNavigator} from 'react-navigation-stack'; import {createDrawerNavigator, DrawerItems, DrawerNavigatorItems} from 'react-navigation-drawer'; // DrawerNavigatorItems代表侧拉栏的items import {SafeAreaView} from 'react-navigation'; // 一个安全的区域，用于适配刘海屏幕，自定义侧边抽屉时需要用到 import {Button, Text, ScrollView} from 'react-native'; import Ionicons from 'react-native-vector-icons/Ionicons'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import SwitchNavigator from './SwitchNavigator'; 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'; import HomePage from '../pages/HomePage'; // 侧拉抽屉 const DrawerNav = createDrawerNavigator({ Page4:{ screen: Page4, navigationOptions:{ drawerLabel: 'Page4', drawerIcon:({tintColor, focused}) => ( <MaterialIcons name={'drafts'} size={24} style={{color:tintColor}} /> ), }, }, Page5:{ screen: Page5, navigationOptions:{ drawerLabel: 'Page5', drawerIcon:({tintColor, focused}) => ( <MaterialIcons name={'move-to-inbox'} size={24} style={{color:tintColor}} /> ), }, }, }, // 在第二个参数中自定义侧拉栏 { contentComponent:(props) => ( <ScrollView style={{backgroundColor: '#098', flex:1}}> <SafeAreaView forceInset={{top: 'always'}}> <DrawerItems {...props}/> </SafeAreaView> </ScrollView> ), contentOptions:{ activeTintColor:'white', }, } ); const MaterialTopTabNavigator = createMaterialTopTabNavigator( { Page1:{ screen:Page1, navigationOptions:{ tabBarLabel:'page1', }, }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel:'page2', }, }, Page3:{ screen:Page3, navigationOptions:{ tabBarLabel:'page3', }, }, }, { tabBarOptions: { activeTintColor: 'red', tabStyle:{ minWidth: 50, }, upperCaseLabel: 'false', // 标签是否大写 默认是大写 style:{ backgroundColor:'#879', }, indicatorStyle:{ // 指示器的样式 height:2, backgroundColor:'white', }, labelStyle:{ // 文字的样式 fontSize: 13, marginTop: 6, marginBottom: 6, }, }, }); const BottomTabNavigator = createBottomTabNavigator( { Page1:{ screen:Page1, navigationOptions:{ tabBarLabel:'page1', tabBarIcon: ({tintColor, focused}) => ( <Ionicons name = {'ios-home'} size = {26} style={{color: tintColor}} /> ), }, }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel:({tintColor, focused})=>( // 默认状态下文字是和图表一样的颜色，这里进行自定义 <Text style={{color:focused ? 'orange' : 'grey'}}>Page2</Text> ), tabBarIcon: ({tintColor, focused}) => ( <Ionicons name = {'ios-people'} size = {26} style={{color: focused ? 'blue' : 'black'}} /> ), }, }, }, { tabBarOptions: { activeTintColor: 'red', }, } ); // 创建导航器 export const AppStackNavigator = createStackNavigator( { HomePage: { screen: HomePage, }, DrawerNav: DrawerNav, SwitchNav: SwitchNavigator, MaterialTopTabNavigator:{ screen: MaterialTopTabNavigator, navigationOptions:{ title:'顶部导航', }, }, BottomTabNavigator:{ screen: BottomTabNavigator, navigationOptions:{ title:'底部导航器', // header: null, }, }, Page1: { screen: Page1, navigationOptions:({navigation}) => ( { title:`${navigation.state.params && navigation.state.params.name}页面名`, } ), }, Page2: { screen: Page2, navigationOptions:{ title:'这是page2', header: null, }, }, Page3: { screen: Page3, navigationOptions:(props) => { const {navigation} = props; const {state, setParams} = navigation; const {params = {}} = state; return { title:params.name ? params.name : 'This is Page3', headerRight:( <Button title={params.mode === 'edit' ? '保存' : '编辑'} onPress={()=>{ setParams({mode:params.mode === 'edit' ? '' : 'edit'}); }}/> ), }; }, }, }, { defaultNavigationOptions: { // header: null // 全局默认属性， 对当前导航所有页面有效 }, }, ); |
然后我们让首页显示各个导航的跳转：
HomePage.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React from 'react'; import {Button, View, StyleSheet, Text} from 'react-native'; export default class HomePage extends React.Component { // 在这里定义页面的导航属性 static navigationOptions = { title: '首页', // 页面上方显示的标题 headerBackTitle: '返回标题', // 页面返回按钮的按键文字 安卓不支持 }; render() { const {navigation} = this.props; return ( <View style={{flex: 1, backgroundColor: 'blue', paddingTop: 30}}> <Text style={styles.text}>HomePage</Text> <Button title={'顶部导航'} onPress={() => { navigation.navigate('MaterialTopTabNavigator'); }} /> <Button title={'底部导航'} onPress={() => { navigation.navigate('BottomTabNavigator'); }} /> <Button title={'切换导航器'} onPress={() => { navigation.navigate('SwitchNav'); }} /> <Button title={'抽屉导航'} onPress={() => { navigation.navigate('DrawerNav'); }} /> </View> ); } } const styles = StyleSheet.create({ text: { fontSize: 20, color: 'white', }, }); |
在上面的代码中可以看到点击抽屉导航会跳转到Page4，然后我们在Page4中调用控制抽屉状态的API，API将注释
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import React from 'react'; import {Button, View, StyleSheet, Text} from 'react-native'; export default class Page4 extends React.Component { render() { const {navigation} = this.props; /* 抽屉导航常用API this.props.navigation.openDrawer(); // 打开 this.props.navigation.closeDrawer() // 关闭 this.props.navigation.toggleDrawer(); // 在打开和关闭之间切换 */ return ( <View style={{flex: 1, backgroundColor: 'red', paddingTop: 30}}> <Text style={styles.text}>PAGE4</Text> <Button title={'Open'} onPress={() => { this.props.navigation.openDrawer(); }} /> <Button title={'Close'} onPress={() => { this.props.navigation.closeDrawer(); }} /> <Button title={'toggle'} onPress={() => { this.props.navigation.toggleDrawer(); }} /> <Button title={'Open Page5'} onPress={() => { navigation.navigate('Page5'); }} /> </View> ); } } const styles = StyleSheet.create({ text: { fontSize: 20, color: 'white', }, }); |
