今回は、react-navigation のユースケースの分析をお届けします。react-navigation を使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。
1. 主なコンポーネント
使用形態に応じて主に 3 つの部分に分かれます:
- StackNavigator: 通常の Navigator と同様、画面上部のナビゲーション バー
- TabNavigator: iOS の TabBarController に相当、画面下のタブ バー
- DrawerNavigator: 引き出し効果、横からスライドアウト
2.
1 を使用して新しいプロジェクトを作成します
react-native init ComponentDemo
ログイン後にコピー
2. このライブラリをアプリケーションにインストールします
npm install --save react-navigation
ログイン後にコピー
インストール完了 ベータ版(v1.0.0～beta.7)であることが分かりましたが、落とし穴が!?この落とし穴については後ほど詳しく説明します~
3. TabNavigator、StackNavigator、DrawerNavigator をテストします
(1) 新しい 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) 新しい 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) を作成します新しい 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) 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)
を実行してエラーを報告しますか?これが先ほどの穴です〜
その理由は何でしょうか？ベータ版のバグであることが判明しました。ディレクトリ内のnode_modules/react-navigation/src/views/Header.jsの12行目を見つけて削除すればOKです~
追記:残念ながら削除してしまいました。このエラーの写真は残さないでください~ この記事を公開しようとしている時点で、最新バージョンは (v1.0.0-beta.9) に変更されており、最新バージョンでは上記のバグが修正されています。
それでは、もう一度実行してみます~
最後の動的レンダリング:
この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな内容については、PHP 中国語に関する他の関連記事に注目してください。 Webサイト！
推奨読書:
vue を使用して 2048 ミニ ゲームを実装する方法
VeeValidate を使用して vue プロジェクトでフォーム検証を実行する方法
以上が反応ナビゲーションのユースケース分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
