Heim > Artikel > Web-Frontend > React-Navigation-Anwendungsfallanalyse
Dieses Mal werde ich Ihnen eine Analyse der Anwendungsfälle für React-Navigation bringen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von React-Navigation?
1. Hauptbestandteile
Es ist je nach Verwendungsform hauptsächlich in drei Teile unterteilt:
StackNavigator: Ähnlich dem normalen Navigator, die Navigationsleiste oben auf dem Bildschirm
TabNavigator: entspricht dem TabBarController in iOS und der Tab-Leiste unten den Bildschirm
DrawerNavigator: Schubladeneffekt, seitlich herausschieben
2. Benutzen
1. Erstellen Sie ein neues Projekt
react-native init ComponentDemo
2. Installieren Sie diese Bibliothek in der Anwendung
npm install --save react-navigation
Nach der Installation habe ich festgestellt, dass es sich um eine Beta-Version (v1.0.0) handelt -beta.7), aber es gibt Fallstricke?! Wir werden gleich ausführlich auf diese Falle eingehen~
3. Testen Sie TabNavigator, StackNavigator und DrawerNavigator
(1) Erstellen Sie eine neue HomePage.js
import React from 'react'; import { StyleSheet, View, Text, Button, Image } from 'react-native'; import { StackNavigator, TabNavigator } from 'react-navigation'; import ChatScreen from './ChatScreen'; import MinePage from './MinePage'; class HomePage extends React.Component{ static navigationOptions={ title: '首页',//设置标题内容 header:{ backTitle: ' ',//返回按钮标题内容(默认为上一级标题内容) } } constructor(props) { super(props); } render() { const {navigate} = this.props.navigation; return ( <View style={styles.container}> <Text style={{padding:10}}>Hello, Navigation!</Text> <Button onPress={() => navigate('Chat',{user:'Sybil'})} title="点击跳转"/> </View> ) } } const MainScreenNavigator = TabNavigator({ Home: { screen: HomePage, navigationOptions: { tabBar: { label: '首页', icon: ({tintColor}) => ( <Image source={require('./image/bar_home_nomarl@3x.png')} style={[{tintColor: tintColor},styles.icon]} /> ), }, } }, Certificate: { screen: MinePage, navigationOptions: { tabBar: { label: '我的', icon: ({tintColor}) => ( <Image source={require('./image/bar_center_normal@3x.png')} style={[{tintColor: tintColor},styles.icon]} /> ), }, } }, }, { animationEnabled: false, // 切换页面时不显示动画 tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的 swipeEnabled: false, // 禁止左右滑动 backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab, none 为不跳转 tabBarOptions: { activeTintColor: '#008AC9', // 文字和图片选中颜色 inactiveTintColor: '#999', // 文字和图片默认颜色 showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线,高度设为 0 后就不显示线了 style: { backgroundColor: '#fff', // TabBar 背景色 }, labelStyle: { fontSize: 12, // 文字大小 }, }, }); const styles = StyleSheet.create({ container:{ flex: 1, backgroundColor:'#fff' }, icon: { height: 22, width: 22, resizeMode: 'contain' } }); const SimpleApp = StackNavigator({ Home: {screen: MainScreenNavigator}, Chat:{screen:ChatScreen}, }); export default SimpleApp;
(2 ) Erstellen Sie ein neues ChatScreen.js
import React from 'react'; import { Button, Image, View, Text } from 'react-native'; class ChatScreen extends React.Component { static navigationOptions = { title:'聊天', }; render() { const {params} = this.props.navigation.state; return ( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}}>Chat with {params.user}</Text> </View> ); } } export default ChatScreen;
(3) Erstellen Sie ein neues MinePage.js
import React,{Component} from 'react'; import { Button, Image, View, Text, StyleSheet } from 'react-native'; import { DrawerNavigator } from 'react-navigation'; import MyNotificationsScreen from './MyNotificationsScreen'; class MinePage extends Component{ static navigationOptions = { title:'我的', drawerLabel: '我的', // Note: By default the icon is only shown on iOS. Search the showIcon option below. drawerIcon: ({ tintColor }) => ( <Image source={require('./image/chat@3x.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; render(){; return( <View style={{backgroundColor:'#fff',flex:1}}> <Text style={{padding:20}}>Sybil</Text> <Button style={{padding:20}} onPress={() => this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> </View> ); } } const styles = StyleSheet.create({ icon: { width: 24, height: 24, }, }); const MyChatNavigator = DrawerNavigator({ MyChat: { screen: MinePage, }, Notifications: { screen: MyNotificationsScreen, }, },{ drawerWidth: 220, // 抽屉宽 drawerPosition: 'left', // 抽屉在左边还是右边 // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件 contentOptions: { initialRouteName: MinePage, // 默认页面组件 activeTintColor: '#008AC9', // 选中文字颜色 activeBackgroundColor: '#f5f5f5', // 选中背景颜色 inactiveTintColor: '#000', // 未选中文字颜色 inactiveBackgroundColor: '#fff', // 未选中背景颜色 style: { // 样式 } } }); export default MyChatNavigator;
(4) Schreiben Sie MyNotificationsScreen.js
import React from 'react'; import { StyleSheet, View, Text, Button, Image } from 'react-native'; class MyNotificationsScreen extends React.Component { static navigationOptions = { title:'通知', drawerLabel: '通知', drawerIcon: ({ tintColor }) => ( <Image source={require('./image/notif@3x.png')} style={[styles.tabIcon, {tintColor: tintColor}]} /> ), }; render() { return ( <View style={{backgroundColor:'#fff'}}> <Button style={{padding:20}} onPress={() => this.props.navigation.navigate('DrawerOpen')} title="点击打开侧滑菜单" /> <Button onPress={() => this.props.navigation.goBack()} title="返回我的界面" /> </View> ); } } const styles = StyleSheet.create({ tabIcon: { width: 24, height: 24, }, }); export default MyNotificationsScreen;
(5) Führen Sie
und einen Fehler melden? Das ist die Grube, die wir oben erwähnt haben~Was ist der Grund? Es stellt sich heraus, dass es sich um einen Fehler in der Beta-Version handelt. Suchen Sie Zeile 12 von node_modules/react-navigation/src/views/Header.js im Verzeichnis und löschen Sie es.Ps: Leider , ich habe diesen Fehler nicht. ~ Wenn ich diesen Artikel veröffentliche, wurde die neueste Version auf (v1.0.0-beta.9) geändert und die neueste Version hat den oben genannten Fehler geändert! Okay, führen Sie es noch einmal aus~Letzte dynamische Darstellung: Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:Wie man Vue verwendet, um das 2048-Minispiel zu implementieren
Wie man VeeValidate verwendet, um Formulare auszuführen Validierung im Vue-Projekt Prüffunktion
Das obige ist der detaillierte Inhalt vonReact-Navigation-Anwendungsfallanalyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!