内容
介绍下页面导航，常用控件：viewpager、scrollView、modal
常用api：Alert 、ToastAndroid 、AppState、BackHandler、Keyboard
一、页面导航
官方文档：
https://reactnative.cn/docs/0.51/navigation.html#content
常见的导航：
1.StackNavigator ：屏幕上方导航栏
2.TabNavigator：屏幕下方标签栏
你还可能在很多地方听说过Navigator，这个老组件会逐步被React Navigation替代
StackNavigator 的使用
1，在项目目录下，安装React-navigation库
首先倒入 "react-navigation": "^1.0.0-beta.21"
npm install --save react-navigation
"dependencies": {
"react-navigation": "^1.0.0-beta.21"
}
2，使用StactkNavigator来管理堆栈。暂且命名为app.js页面作为默认入口代码如下：
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import SplashScene from './SplashScene';
//导航注册
export default App = StackNavigator({
Splash: { screen: SplashScene}
});
SplashScene.js代码
'use strict';
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
StatusBar,
Image,
Button,
} from 'react-native';
export default class SplashScene extends Component {
//设置导航栏方式二，在页面的tatic navigationOptions中设置
static navigationOptions = ({ navigation }) => ({
headerTitle: '欢迎页面',
headerRight: (运行效果：
3，添加一个新的页面MainScene.js
'use strict';
import React, { Component } from 'react';
import {
View,
Text,
Image,
StyleSheet,
Button,
TouchableHighlight
} from 'react-native';
import { connect } from 'react-redux';
class MainScene extends Component {
static navigationOptions = {
headerTitle: '首页',
};
constructor(props) {
super(props);
this.state = {
selectedTab: 'home',
};
}
render() {
const { params } = this.props.navigation.state;
return (
{"我的首页"}
);
}
}
function mapStateToProps(state) {
const { mainPage } = state;
return {
mainPage,
}
}
export default connect(mapStateToProps)(MainScene);
4、我们使用的两个页面跳转,
页面需要在StackNavigator进行注册：
类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。
export default App = StackNavigator({
Splash: { screen: SplashScene}，
Home: { screen: MainScene },//新添加的页面
});
5、在SplashScene页面中跳转MainScene ，根据routeName --“Home”关联到MainScene 页面。
this.props.navigation.navigate('Home');
//返回上一级
this.props.navigation.goBack(); // 回退到上一个页面
6、如何需要传递参数怎么传：
只需要在跳转时加一个json格式的对象即可
this.props.navigation.navigate('Home'，{ user: '用户名：king'} );//参数传递
在接受页面，即跳转的页面MainScene 中：
this.props.navigation.state中将去取参数：
const { params } = this.props.navigation.state;
render() {
const { params } = this.props.navigation.state;
return (
{params.user}
);
一些属性介绍：navigationOptions---配置StackNavigator的一些属性。
-
header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
- headerTitle：设置导航栏标题，推荐
- headerRight：设置导航条右侧。可以是按钮或者其他视图控件
- headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
- headerStyle：设置导航条的样式。背景色，宽高等
- headerTitleStyle：设置导航栏文字样式
- headerTintColor：设置导航栏颜色
再添加路由的地方直接设置
Splash: {
screen: SplashScene,
navigationOptions:({navigation}) => ({//设置导航栏方式一，在导航注册时设置
headerTitle:'我是导航栏',
headerStyle: {backgroundColor: '#5da8ff',height:140},
})
},
在页面的static navigationOptions 中设置
static navigationOptions = ({ navigation }) => ({
headerTitle: '欢迎页面',
headerRight: (TabNavigator 的使用
切换组件 类似底部导航栏，用来在同一屏幕下切换不同界面
1、使用
API定义TabNavigator(RouteConfigs, TabNavigatorConfig)
import {
TabNavigator,
} from 'react-navigation';
2、配置需显示的page
export default Tab = TabNavigator({
//每一个页面的配置
Home: {
screen: Home,//当前选项卡加载的页面
//配置每一个选项卡的样式
navigationOptions: {
tabBarLabel: '首页',//显示的标签文字
//显示的图片
tabBarIcon: ({tintColor}) => (
3、属性说明
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)
tabBarIcon：设置标签栏的图标。需要给每个都设置
tabBarLabel：设置标签栏的title。推荐
导航栏配置
tabBarPosition：设置tabbar的位置，iOS默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）
swipeEnabled：是否允许在标签之间进行滑动
animationEnabled：是否在更改标签时显示动画
lazy：是否根据需要懒惰呈现标签，而不是提前，意思是在app打开的时候将底部标签栏全部加载，默认false,推荐为true
initialRouteName： 设置默认的页面组件
backBehavior：按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
tabBarOptions：配置标签栏的一些属性iOS属性
activeTintColor：label和icon的前景色 活跃状态下
activeBackgroundColor：label和icon的背景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
inactiveBackgroundColor：label和icon的背景色 不活跃状态下
showLabel：是否显示label，默认开启 style：tabbar的样式
labelStyle：label的样式安卓属性
activeTintColor：label和icon的前景色 活跃状态下
inactiveTintColor：label和icon的前景色 不活跃状态下
showIcon：是否显示图标，默认关闭
showLabel：是否显示label，默认开启 style：tabbar的样式
labelStyle：label的样式 upperCaseLabel：是否使标签大写，默认为true
pressColor：material涟漪效果的颜色（安卓版本需要大于5.0）
pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）
scrollEnabled：是否启用可滚动选项卡 tabStyle：tab的样式
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
labelStyle：label的样式
iconStyle：图标样式
二、viewpager使用
官方链接：
https://reactnative.cn/docs/0.51/viewpagerandroid.html#content
一个允许在子视图之间左右翻页的容器。每一个ViewPagerAndroid的子容器会被视作一个单独的页，并且会被拉伸填满ViewPagerAndroid。
基本用法
对于该组件内部可以嵌套View,每一个子View就相当于一个Page，每一个单独的页面显示时它会拉伸填满ViewPageAndroid。
1、实现：
{
this.viewPage = viewPage;
}}
onPageScroll={this._onPageScroll}
onPageSelected={this._onPageSelected}
onPageScrollStateChanged={this._onPageScrollStateChanged}
pageMargin={10}>
{pages}
{pages} 为里面展示的子页面数组。
pages.push(
)
2、属性说明：
pageMargin:设置每两页间距
initialPage：初始化显示的页数(从0开始)。默认显示第一页(0)
scrollEnabled 是否能滚动，true为可以滚动。
onPageScroll:当在页间切换时（不论是由于动画还是由于用户在页间滑动/拖拽）执行。
回调参数中的event.nativeEvent对象会包含如下数据：
position 从左数起第一个当前可见的页面的下标。
offset 一个在[0,1)（大于等于0，小于1）之间的范围，代表当前页面切换的状态。
onPageSelected这个回调会在页面切换完成后调用。
回调参数中的event.nativeEvent对象会包含如下的字段：
-
position当前被选中的页面下标
onPageScrollStateChanged:页面滑动状态变化时调用此回调函数
- idle 空闲，意味着当前没有交互。
- dragging 拖动中，意味着当前页面正在被拖动。
- settling 处理中，意味着当前页面发生过交互，且正在结束开头或收尾的动画。
//无动画
this.viewPage.setPage(indexPage)
//带动画
this.viewPage.setPageWithoutAnimation(indexPage)
三、ScrollView的使用
官方
https://reactnative.cn/docs/0.51/scrollview.html#content
1、简单使用
{
this._scrollView = scrollView;
}}
style={styles.verticalScrollView}
onScroll={() => console.log('onScroll')}
showsVerticalScrollIndicator={false}
onContentSizeChange={(event) => console.log('onContentSizeChange')}>
{items}
{items}为里面展示的子页面数组。
2、属性说明：
horizontal true表示水平排列,横向滑动,false为垂直排列
contentContainerStyle:设置内层的内容容器样式，所有的子视图都会包裹在内容容器内
keyboardDismissMode :用户拖拽滚动视图的时候，是否要隐藏软键盘
// none（默认值），拖拽时不隐藏软键盘。
//on-drag 当拖拽开始的时候隐藏软键盘。
//interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。
//keyboardShouldPersistTaps :当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置scrollEnabled:bool是否允许滚动，默认true
pagingEnabled:为true时，滚动条会停在滚动视图的尺寸的整数倍位置。
onScroll:在滚动时调用,默认每一帧调用一次
方法：
this._scrollView.scrollToEnd({animated: true})//点击滚动到最后
this._scrollView.scrollTo({x: 0, y: 0, animated: true})}//点击滚动到最后
ps:ViewPageAndroid只对Android平台有效，如果使用就要考虑适配iOS，可以考虑用ScrollView组件可以实现此效果。
官方文档：
ScrollView和ListView/FlatList应该如何选择？ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。
这就是为什么我们还有专门的ListView组件。ListView会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而API在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用ListView，哪怕它们用起来更麻烦。
四、modal的使用
Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
类似dialog。
1、使用
this._setModalVisible(false)}
transparent={this.state.transparent}
onShow={() => console.log('onShow')}
>
{this.state.animationType === 'none' ? '没有' : '有'}动画
当前显示方向模式{this.state.currentOrientation}
2、属性说明：
//onRequestClose:点击键盘返回键关闭modal(android)
//onShow:显示时回调
//visible:是否显示
//animationType动画类型'none', 'slide', 'fade',默认none
//transparent是否设置透明
api介绍
一、Alert 的使用：启动一个提示对话框，包含对应的标题和信息。
提示消息和没有标题以及默认的按钮
Alert.alert(null, '我是提示消息');
有提示消息和标题以及默认的按钮
Alert.alert('我是标题', '我是提示消息');
设置了一个按钮,能监听点击事件
Alert.alert('我是标题', '我是提示消息', [{text: '确定', onPress: () => console.log('确定')}]);
设置了两个按钮,监听onDismiss
Alert.alert('我是标题', '点击提示框的外面，自动取消提示框，并调用onDismis函数', [
{text: '取消', onPress: () => console.log('取消')},
{text: '确定', onPress: () => console.log('确定')}
], {
onDismiss: () => {
console.log('onDismiss')
}
});
三个按钮,点提示框外部不会取消(cancelable)
Alert.alert('我是标题', '设置了cancelable：false,当点击提示框的外面,不取消对话框显示,默认true', [
{text: '忽略', onPress: () => console.log('忽略')},
{text: '取消', onPress: () => console.log('取消')},
{text: '确定', onPress: () => console.log('确定')}
], {cancelable: false});
二、ToastAndroid 的使用。
参数：
String message: 一个字符串，表示将要显示的文本内容。
int duration: 提示信息持续显示的时间。
可以是ToastAndroid.SHORT或者ToastAndroid.LONG。还有一个名为showWithGravity的方法可以指定弹出的位置。可选项有：ToastAndroid.TOP, ToastAndroid.BOTTOM,
ToastAndroid.show('我是Toast.show，持续的时间SHORT', ToastAndroid.SHORT)
ToastAndroid.show('我是Toast.show，持续的时间LONG', ToastAndroid.LONG)
//showWithGravity,可以指定显示位置,此处指定CENTER,有TOP，BOTTOM
ToastAndroid.showWithGravity('我是Toast.show，持续的时间LONG', ToastAndroid.LONG, ToastAndroid.CENTER,)
三、AppState使用
能告诉你应用当前是在前台还是在后台，并且能在状态变化的时候通知你。
三种状态：
active - 应用正在前台运行
background - 应用正在后台运行。用户既可能在别的应用中，也可能在桌面。
inactive - 此状态表示应用正在前后台的切换过程中，或是处在系统的多任务视图，又或是处在来电状态中。
static addEventListener(type: string, handler: Function)
添加一个监听函数，用于监听应用状态的变化。type参数应填change 。
static removeEventListener(type: string, handler: Function)
移除一个监听函数。type参数应填change。
1、注册：
//注册监听
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange)
}
//移除监听
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
//App状态变化监听
_handleAppStateChange = (appState) => {
//记录状态 appState
};
BackHandler使用(Android)
监听设备上的后退按钮事件。
Android：监听后退按钮事件。如果没有添加任何监听函数，或者所有的监听函数都返回false，则会执行默认行为，退出应用。
//注册监听
componentDidMount() {
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
//移除监听
componentWillUnmount() {
if (Platform.OS === 'android') {
BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid = () => {
//todo
return true;
}
四、Keyboard 使用
Keyboard组件可以用来控制键盘相关的事件。
可以监听原生键盘事件以做出相应回应，比如收回键盘。
componentWillMount () {
//监听键盘的显示与隐藏
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount () {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow () {
ToastAndroid.show('Keyboard Shown', ToastAndroid.SHORT)
}
_keyboardDidHide () {
ToastAndroid.show('Keyboard Hidden', ToastAndroid.SHORT)
}
2、主动隐藏键盘
Keyboard.dismiss();