RN分享会

2018-05-07 本文已影响0人 king龙123

内容

介绍下页面导航，常用控件：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: (<Button onPress={() => navigation.navigate('Home',{ user: '用户名：king' })} title={'向前'} />)
    });

    constructor(props) {
        super(props);
    }
    render() {
        return (
            <View style={styles.container}>

                <Text style={styles.appText}>
                    {'欢迎'}
                </Text>
                <Button   style={styles.appText} onPress={this._secondsCountsPressed.bind(this)}
                          title="跳转首页" >

                </Button  >
            </View>
        );
    }

    _secondsCountsPressed() {
         this.props.navigation.navigate('Home' );
    }
}

运行效果：

图片.png

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 (
            <View style={styles.container}>
                <Text style={[styles.appText,{color:'#6fd177'}]}>
                    {"我的首页"}
                </Text>
            </View>
        );
    }

}
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 (
            <View style={styles.container}>
                <Text style={[styles.appText,{color:'#6fd177'}]}>
                    {params.user}
                </Text>
            </View>
        );

图片.png

一些属性介绍：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: (<Button onPress={() => navigation.navigate('Home',{ user: '用户名：king' })} title={'向前'} />),
        headerStyle: {backgroundColor: '#5da8ff',height:140},
        headerTintColor:'#33dd33'
    });

图片.png

TabNavigator 的使用

切换组件类似底部导航栏，用来在同一屏幕下切换不同界面

图片.png

1、使用
API定义TabNavigator(RouteConfigs, TabNavigatorConfig)

import {
    TabNavigator,
} from 'react-navigation';

2、配置需显示的page

export default Tab = TabNavigator({
    //每一个页面的配置
    Home: {
        screen: Home,//当前选项卡加载的页面
        //配置每一个选项卡的样式
        navigationOptions: {
            tabBarLabel: '首页',//显示的标签文字
            //显示的图片
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../images/ic_home.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}
                />
            ),
        },
    },
    Type: {
        screen: Type,
        navigationOptions: {
            tabBarLabel: '分类',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../images/ic_type.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            ),
        }
    },
    ShopCar: {
        screen: ShopCar,
        navigationOptions: {
            tabBarLabel: '购物车',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../images/ic_shop_car.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            ),
        }
    },
    Mine: {
        screen: Mine,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor}) => (
                <Image
                    source={require('../images/ic_me.png')}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}/>
            ),
        }
    },

}, {
    //设置TabNavigator的位置
    tabBarPosition: 'bottom',
    //是否在更改标签时显示动画
    animationEnabled: true,
    //是否允许在标签之间进行滑动
    swipeEnabled: true,
    //按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    backBehavior: "none",

    //设置默认的页面组件
    initialRouteName: "Mine",
    //设置Tab标签的属性
    tabBarOptions: {
        //Android属性
        upperCaseLabel: false,//是否使标签大写，默认为true
        //共有属性
        showIcon: true,//是否显示图标，默认关闭
        showLabel: true,//是否显示label，默认开启
        activeTintColor: '#EB3695',//label和icon的前景色 活跃状态下（选中）
        inactiveTintColor: 'gray',//label和icon的前景色 活跃状态下（未选中）
        style: { //TabNavigator 的背景颜色
            backgroundColor: 'white',
            height: 55,
        },
        indicatorStyle: {//标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题
            height: 0,
        },
        labelStyle: {//文字的样式
            fontSize: 13,
            marginTop: -5,
            marginBottom: 5,
        },
        iconStyle: {//图标的样式
            marginBottom: 5,
        }
    },
});

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、实现：

                <ViewPagerAndroid
                    style={styles.viewPager}
                    scrollEnabled={this.state.scrollEnabled}
                    initialPage={0}
                    ref={(viewPage) => {
                        this.viewPage = viewPage;
                    }}
                    onPageScroll={this._onPageScroll}
                    onPageSelected={this._onPageSelected}
                    onPageScrollStateChanged={this._onPageScrollStateChanged}
                    pageMargin={10}>
                    {pages}
                </ViewPagerAndroid>

{pages} 为里面展示的子页面数组。

            pages.push(
                <View key={i} style={pageStyle} collapsable={false}>
                    <Image
                        style={styles.image}
                        resizeMode={Image.resizeMode.contain}
                        source={IMAGE_URIS[i % BGCOLOR.length]}
                    />
                    <CustomCount/>
                </View>
            )

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、简单使用

            <ScrollView
                ref={(scrollView) => {
                    this._scrollView = scrollView;
                }}
                style={styles.verticalScrollView}
                onScroll={() => console.log('onScroll')}
                showsVerticalScrollIndicator={false}
                onContentSizeChange={(event) => console.log('onContentSizeChange')}>
                {items}
            </ScrollView>

    {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、使用

                <Modal
                    animationType={this.state.animationType}
                    presentationStyle={this.state.presentationStyle}
                    visible={this.state.modalVisible}
                    onRequestClose={() => this._setModalVisible(false)}
                    transparent={this.state.transparent}
                    onShow={() => console.log('onShow')}
                >
                    <View style={[styles.container, backgroundColor]}>
                        <View style={[styles.innerContainer, innerContainerTransparentStyle]}>
                            <Text>{this.state.animationType === 'none' ? '没有' : '有'}动画</Text>
                            <Text>当前显示方向模式{this.state.currentOrientation}</Text>
                            <Button
                                title="关闭"
                                onPress={this._setModalVisible.bind(this, false)}
                                style={styles.modalButton}>
                            </Button>
                        </View>
                    </View>
                </Modal>

2、属性说明：
//onRequestClose:点击键盘返回键关闭modal(android)
//onShow:显示时回调
//visible:是否显示
//animationType动画类型'none', 'slide', 'fade',默认none
//transparent是否设置透明

api介绍

一、Alert 的使用：启动一个提示对话框，包含对应的标题和信息。

提示消息和没有标题以及默认的按钮

    Alert.alert(null, '我是提示消息');

图片.png

有提示消息和标题以及默认的按钮

          Alert.alert('我是标题', '我是提示消息');

图片.png

设置了一个按钮,能监听点击事件

      Alert.alert('我是标题', '我是提示消息', [{text: '确定', onPress: () => console.log('确定')}]);

图片.png

设置了两个按钮,监听onDismiss

      Alert.alert('我是标题', '点击提示框的外面，自动取消提示框，并调用onDismis函数', [
                            {text: '取消', onPress: () => console.log('取消')},
                            {text: '确定', onPress: () => console.log('确定')}
                        ], {
                            onDismiss: () => {
                                console.log('onDismiss')
                            }
                        });

图片.png

三个按钮,点提示框外部不会取消(cancelable)

              Alert.alert('我是标题', '设置了cancelable：false,当点击提示框的外面,不取消对话框显示,默认true', [
                            {text: '忽略', onPress: () => console.log('忽略')},
                            {text: '取消', onPress: () => console.log('取消')},
                            {text: '确定', onPress: () => console.log('确定')}
                        ], {cancelable: false});

图片.png

二、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();

RN分享会

内容

一、页面导航

StackNavigator 的使用

一些属性介绍：navigationOptions---配置StackNavigator的一些属性。

header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null

TabNavigator 的使用

二、viewpager使用

三、ScrollView的使用

四、modal的使用

api介绍

一、Alert 的使用：启动一个提示对话框，包含对应的标题和信息。

二、ToastAndroid 的使用。

三、AppState使用

static addEventListener(type: string, handler: Function)

static removeEventListener(type: string, handler: Function)

BackHandler使用(Android)

四、Keyboard 使用

猜你喜欢

热点阅读