赞
踩
前面我介绍过几个常用的内置组件的使用方法,对于一些较为复杂的需求可能需要写自定义组件来满足,但是有些时候第三方库的组件可以完美的满足相应的需求,没必要自己去实现一套,这时我们不妨利用现有的轮子,方便快捷,省时省事。
首先介绍引入第三方组件的方法。
1.1 引入第三方库,进入项目的根目录(即package.json所在目录),输入命令:
npm install [第三方库] --save
例如:
npm install react-native-tab-navigator --save
1.2 在要使用该组件的js文件中import该模块:
import [第三方组件] from '[第三方库]';
例如:
import TabNavigator from 'react-native-tab-navigator';
现在几乎所有的应用都少不了页面跳转功能,除了页面跳转功能外,大多数应用还提供页面导航功能(底部导航栏,顶部导航栏还有侧滑导航),在React Native中这些功能都可以由Navigation实现。
React Native在0.44版本之前是由Navigator作为导航器,从0.44开始弃用了Navigator,将其放到react-native-deprecated-custom-components
,如果仍然想使用Navigator,需要先安装该模块:
yarn add react-native-deprecated-custom-components
然后在代码中引入即可
import { Navigator } from 'react-native-deprecated-custom-components'
怎么引入React-Navigation呢?如上所述,在项目的根目录输入命令:
npm install --save react-navigation
React Navigation从0.44版本开始顶替了之前的Navigator。主要包括三个部分
StackNavigator见名知义,堆栈式导航器,每次跳转到新页面时都放在堆栈顶部,从该页面返回时从堆栈顶部移除该页面。首先我们从一个单页面开始使用Stack Navigator。
新建一个StackMainScreen.js
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class StackMainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({
Home: { screen: StackMainScreen },
});
export default SimpleApp;
标题可通过title属性在navigationOptions
中配置,另外还有许多别的属性也可以在这里设置。
页面效果如下:
下面添加一个新的页面ChatScreen.js
import React, {Component} from "react";
import {StyleSheet,View, Text } from "react-native";
export default class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
回到StackMainScreen.js,添加一个Button按钮,使用navigate链接到ChatScreen。
另外别忘了引入Button组件。
import {
AppRegistry,Text,View,Button,
} from 'react-native';
class StackMainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return(
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>);
}
}
最后将ChatScreen 页面加到StackNavigator中
const SimpleApp = StackNavigator({
Home: { screen: StackMainScreen },
Chat: { screen: ChatScreen },
});
通过点击跳转按钮可以跳转到ChatScreen页面,点击返回则会回退到StackMainScreen页面,如下图所示:
通过导航器可以通过将参数从一个页面传递到另一个页面。
将StackMainScreen中的Button组件改为:
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
然后在ChatScreen组件中通过路由接收参数,显示出来
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
然后reload可以看到:
以上是Stack Navigator的基本使用。
源码地址在这里
关于源码的使用,你可以在根目录中的App.js的render中替换你想显示的组件,如StackMainScreen
,当然别忘记先import
。具体可以看这个系列文章react native学习笔记3中
Demo使用的介绍。
StackMainScreen.js
import StackMainScreen from "./src/05_navigation/stacknavigation/StackMainScreen";
export default class ExerciseProject extends Component {
render() {
return (
<StackMainScreen />
);
}
}
AppRegistry.registerComponent('ExerciseProject', () => ExerciseProject);
标题栏是只有Stack Navigator独有的,TabNavigator和Drawernavigator是没有的,在上述示例中,ChatScreen通过设置navigationOptions中的title参数显示标题的内容
class ChatScreen extends React.Component {
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
...
}
类似的,可以通过设置 headerRight参数在导航栏中添加自定义的右部按钮。
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
headerRight: <Button title="Info" />,
});
navigationOptions 可通过 navigation prop 属性来定义,navigationOptions 提供navigation.setParams方法来设置修改navigationOptions的参数。下面演示当按下标题栏右部按钮,通过路由参数的不同显示不同的按钮。
static navigationOptions = ({ navigation }) => {
const {state, setParams} = navigation;
const isInfo = state.params.mode === 'info';
const {user} = state.params;
return {
title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
headerRight: (
<Button
title={isInfo ? 'Done' : `${user}'s info`}
onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
/>
),
};
};
navigationOptions 其他的一些重要参数介绍
alignSelf:'center'
StackNavigator(RouteConfigs, StackNavigatorConfig)
导航的配置,在上述的StackMainScreen.js中的StackNavigator对象添加上下切换的页面切换风格。
const SimpleApp = StackNavigator(
{
Home: { screen: StackMainScreen },
Chat: { screen: ChatScreen },
},
{
mode: 'modal',
}
);
RouteConfigs路由的配置
StackNavigatorConfig
StackNavigator第二个参数StackNavigatorConfig,配置StackNavigator的一些属性。
StackNavigatorConfig的参数介绍
路由参数:
可视化参数
TabNavigator选项卡导航,对于功能比较丰富的应用通常会选用选项卡导航,例如手机qq、微信、微博等常用app。
新建一个TabMainScreen.js,实现主页以及选项卡。
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
} from 'react-native';
import SecondScreen from "./SecondScreen";
import { TabNavigator } from "react-navigation";
class TabMainScreen extends React.Component {
render() {
return <Text>Hello Mr.onion</Text>
}
}
const TabMainScreenNavigator = TabNavigator({
Main: { screen: TabMainScreen },
Second: { screen: SecondScreen },
});
export default TabMainScreenNavigator;
再新建一个SecondScreen.js,实现选项卡的第二个页面。
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class SecondScreen extends React.Component {
render() {
return <Text>Hello Fang</Text>
}
}
除了通过选项卡切换页面,还可以通过按钮指定跳转到别的选项卡页面。
在TabMainScreen.js中的class TabMainScreen加上navigationOptions的设置,类似StackNavigator的navigationOptions 。设置标签的名字和图标。
static navigationOptions = {
tabBarLabel: 'Home',
// Note: By default the icon is only shown on iOS. Search the showIcon option below.
tabBarIcon: ({ tintColor }) => (
<Image
source={require('../../images/color_for_danmu_normal.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
添加相应的icon的style
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
render渲染页面改为一个按钮,点击可跳转到SecondScreen。
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Second')}
title="Go to notifications"
/>
);
}
别忘了import相应的组件StyleSheet,Button,Image
import {
AppRegistry,
Text,
View,
Button,
StyleSheet,
Image,
} from 'react-native';
修改TabNavigator的设置,该组件在android中默认不显示选项卡的图标,ios中默认显示。若要达到相同的效果,都显示选项卡图标,可以在tabBarOptions显示指定showIcon:'true'
。
const TabMainScreenNavigator = TabNavigator(
{
Main: { screen: TabMainScreen },
Second: { screen: SecondScreen },
},
{
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
showIcon:'true'
},
}
);
类似的,SecondScreen.js中加上navigationOptions的设置
static navigationOptions = {
tabBarLabel: 'Second',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('../../images/face_unpress.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render渲染页面改为一个按钮,点击可返回上一页
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
相应的样式style及import同TabMainScreen。
TabNavigator(RouteConfigs, TabNavigatorConfig)
导航的配置
const TabMainScreenNavigator = TabNavigator(
{
Main: { screen: TabMainScreen },
Second: { screen: SecondScreen },
},
{
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#e91e63',
showIcon:'true'
},
}
);
若将tabBarPosition: 'top'
改为bottom
,则选项栏到下面:
RouteConfigs导航路由的配置,同StackNavigator的路由配置RouteConfigs一样。
TabNavigatorConfig配置TabNavigator的一些属性。
路由参数
可视化参数
tabBarOptions配置底部标签栏TabBarBottom的属性(ios中的默认标签栏)
示例
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
backgroundColor: 'blue',
},
}
tabBarOptions配置顶部标签栏TabBarTop的属性(android中的默认标签栏)
示例:
tabBarOptions: {
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 100,
},
style: {
backgroundColor: 'blue',
},
indicatorStyle: { height: 0 }
}
TabNavigator选项卡的配置类似于StackNavigator的标题栏的配置,都是设置navigationOptions。例如SecondScreen中的navigationOptions,设置了选项卡的名称label和图标icon。
static navigationOptions = {
tabBarLabel: 'Second',
tabBarIcon: ({ tintColor }) => (
<Image
source={require('../../images/face_unpress.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
navigationOptions参数介绍
示例中的源码可在这里下载
DrawerNavigator 侧滑(抽屉)导航器
基本使用方法类似TabNavigator,这里就不展开细说了,直接上示例源码。首页DrawerMainScreen.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
StyleSheet,
Image,
} from 'react-native';
import DrawerSecondScreen from "./DrawerSecondScreen";
import { DrawerNavigator } from "react-navigation";
class DrawerMainScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={require('../../images/color_for_danmu_normal.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Second')}
title="Go to Second"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});
const DrawerMainScreenNavigator = DrawerNavigator({
Home: {
screen: DrawerMainScreen,
},
Second: {
screen: DrawerSecondScreen,
},
});
export default DrawerMainScreenNavigator;
SecondScreen.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button,
StyleSheet,
Image,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class DrawerSecondScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image
source={require('../../images/face_unpress.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 26,
height: 26,
},
});
打开和关闭侧滑栏的方法:
this.props.navigation.navigate('DrawerOpen'); // 打开
this.props.navigation.navigate('DrawerClose'); // 关闭
也可以使用DrawerToggle切换的方式,DrawerToggle会根据侧滑栏的状态来切换。
this.props.navigation.navigate('DrawerToggle');
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
RouteConfigs导航设置,同StackNavigator的RouteConfigs
DrawerNavigatorConfig配置DrawerNavigator的一些属性。
路由参数:
{
drawerWidth: 200,
drawerPosition: 'right',
contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>
}
通过DrawerNavigatorConfig中的contentComponent 对象DrawerItems 配置自定义的侧滑栏菜单内容。
示例代码:
import { DrawerItems } from 'react-navigation';
const CustomDrawerContentComponent = (props) => (
<View style={styles.container}>
<DrawerItems {...props} />
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
DrawerItems的参数配置contentOptions:
示例:
contentOptions: {
activeTintColor: '#e91e63',
style: {
marginVertical: 0,
}
}
DrawerNavigator选项卡的配置类似于TabNavigator选项卡的配置,都是设置navigationOptions。例如DrawerSecondScreen中的navigationOptions,设置了选项卡的名称label和图标icon。
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image
source={require('../../images/face_unpress.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
navigationOptions参数介绍
{ focused: boolean, tintColor: string }
{ focused: boolean, tintColor: string }
示例中的源码在这里
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。