【React Native】React Native项目设计与知识点分享-白红宇

【React Native】React Native项目设计与知识点分享

阅读量：7039 次

发布时间：2019-06-28

本文共 14649 字，大约阅读时间需要 48 分钟。

　　闲暇之余，写了一个React Native的demo，可以作为大家的入门学习参考。

　　GitHub:

　　项目截图如下：

　一、项目界面设计

　　1、

　　 React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求，它完全使用 JavaScript 编写（因此你可以阅读并理解所有源码）。支持iOS/Android.

　　1、如何在项目进行使用？

yarn add react-navigation# or with npm# npm install --save react-navigation

　　然后，安装 react-native-gesture-handler。如果你正在使用 ,那么你什么都不需要做, SDK 中已经包含了这些. 否则：　　

yarn add react-native-gesture-handler# or with npm# npm install --save react-native-gesture-handler

　　最后进行Link 所有的原生依赖

react-native link react-native-gesture-handler

　　2、路由配置

　　为某个模块创建StackNavigator导航

const HomeStack = createStackNavigator(    {        Home:{            screen:HomeScreen,            navigationOptions:()=>({                headerBackTitle: null,            })        },         //添加多个路由        CarLoans:CarLoansScreen,        CheckRules:CheckRulesScreen,    },)......

　　将多个模块添加到TabNavigator上

const TabNavigator = createBottomTabNavigator(    {        Home:{            screen:HomeStack,            navigationOptions:({navigation}) => ({                tabBarLabel:'首页',                tabBarIcon:({focused}) => (                                    ),            }),        },        Mall:{            screen:MallStack,            navigationOptions:({navigation}) => ({                tabBarLabel:'商城',                tabBarIcon:({focused}) => (                                    )            }),        },        Publish:{            screen:PublishStack,            navigationOptions:({navigation}) => ({                tabBarLabel:'发布',                tabBarIcon:({focused}) => (                                    )            }),        },        Discover:{            screen:DiscoverStack,            navigationOptions:({navigation}) => ({                tabBarLabel:'发现',                tabBarIcon:({focused}) => (                                    )            }),        },        Mine:{            screen:MineStack,            navigationOptions:({navigation}) => ({                tabBarLabel:'我的',                tabBarIcon:({focused}) => (                                    )            }),        },    },    {        defaultNavigationOptions: ({ navigation }) => {            let tabBarVisible = true;            if (navigation.state.index > 0) {                tabBarVisible = false;            }            return {                tabBarVisible,            };        },        tabBarPosition:'bottom',        tabBarOptions: {            activeTintColor: 'blue', //选中tabbar的文字颜色            inactiveTintColor: 'gray',            showIcon:true,        },    });export default  createAppContainer(TabNavigator);

　　2、选择相册照片或视频，或进行拍照

　　（1）引入react-native-image-picker

yarn add react-native-image-pickerreact-native link react-native-image-picker

　　（2）在项目中使用react-native-image-picker

import ImagePicker from 'react-native-image-picker';//选择图片    selectPhotoTapped() {        const options = {            // 弹窗标题            title: '选择图片',            cancelButtonTitle: '取消',            takePhotoButtonTitle: '拍照',            chooseFromLibraryButtonTitle: '选择照片',            // 自定义按钮            customButtons: [                {name: 'fb', title: 'Choose Photo from Facebook'},            ],            // 相机类型'front' 或者 'back'            cameraType: 'back',            // 图片或视频:'photo','video'            mediaType: 'photo',            // 视频质量            videoQuality: 'high',            //最大视频录制时间            durationLimit: 10,            //最长宽            maxWidth: 300,            //最长高，            maxHeight: 300,            //图片质量            quality: 0.8,            angle: 0,            //是否可以编辑            allowsEditing: false,            //如果为真，则禁用data生成的base64字段            noData: false,            // 如果提供此密钥，该图像将被保存在Documents iOS 应用程序的目录中，或者保存在PicturesAndroid上的应用程序目录（而不是临时目录）            storageOptions: {                skipBackup: true            }        };        ImagePicker.showImagePicker(options, (response) => {            console.log('Response = ', response);            if (response.didCancel) {                console.log('User cancelled photo picker');            }            else if (response.error) {                console.log('ImagePicker Error: ', response.error);            }            else if (response.customButton) {                console.log('User tapped custom button: ', response.customButton);            }            else {                let source = { uri: response.uri };                // You can also display the image using data:                // let source = { uri: 'data:image/jpeg;base64,' + response.data };                this.setState({                    avatarSource: source                });            }        });    }    //选择视频    selectVideoTapped() {        const options = {            title: '选择视频',            cancelButtonTitle: '取消',            takePhotoButtonTitle: '录制视频',            chooseFromLibraryButtonTitle: '选择视频',            mediaType: 'video',            videoQuality: 'medium'        };        ImagePicker.showImagePicker(options, (response) => {            console.log('Response = ', response);            if (response.didCancel) {                console.log('User cancelled video picker');            }            else if (response.error) {                console.log('ImagePicker Error: ', response.error);            }            else if (response.customButton) {                console.log('User tapped custom button: ', response.customButton);            }            else {                this.setState({                    videoSource: response.uri                });            }        });    }

　3、创建切换选项卡

　　导入

npm install react-native-scrollable-tab-view --save

　　项目中引入

//引用插件import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
      
      }                    tabBarTextStyle={
   {fontSize:16}}                    tabBarActiveTextColor={'#fdd000'}                    tabBarInactiveTextColor={'#999999'}                    tabBarUnderlineStyle={
   {backgroundColor:'#fdd000'}}                >                    {                        label.map((item,index) =>{                            if (index === 0) {                                return 
      
                                   } else {                                return 
       
                                    }                        })                    }

　　4、使用Modal组件

　　Modal组件可以用来覆盖包含React Native根视图的原生视图（如UIViewController，Activity）。在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。　　


     
      {alert('modal has been closed')}}                >                        
                                  
       
                                        {
    this.renderItem()}                            
                               
                      
     ......renderItem(){        let itemTitleArr = ['京','沪','浙','苏','粤','鲁','晋','冀',            '豫','川','渝','辽','吉','黑','皖','鄂',            '湘','赣','闽','陕','甘','宁','蒙','津',            '贵','云','桂','琼','青','新','藏'];;        var itemArr = [];        for (var i = 0; i < itemTitleArr.length; i++) {            itemArr.push(                
                         
                              
       
        {itemTitleArr[i]}
                           
                      
                 )        }        return itemArr;    }

　　5、下拉列表实现

import React, {Component} from 'react';import {View, Text, Image, TouchableOpacity, ScrollView, Animated, Easing, StyleSheet} from 'react-native';import PropTypes from 'prop-types';class DropdownMenu extends Component {    constructor(props, context) {        super(props, context);        var selectIndex = new Array(this.props.data.length);        for (var i = 0; i < selectIndex.length; i++) {            selectIndex[i] = 0;        }        this.state = {            activityIndex: -1,            selectIndex: selectIndex,            rotationAnims: props.data.map(() => new Animated.Value(0))        };        this.defaultConfig = {            bgColor: '#f5f5f5',            tintColor: '#fdd000',            activityTintColor: "red",            arrowImg: 'ic_nav_down',            checkImage: 'ic_nav_down'        };    }    renderChcek(index, title) {        var activityIndex = this.state.activityIndex;        if (this.state.selectIndex[activityIndex] === index) {            var checkImage = this.props.checkImage ? this.props.checkImage : this.defaultConfig.checkImage;            return (                
                          
       
                                {title}                    
                           
                       
                  );        } else {            return (                
                          
       
        {title}
                       
                  );        }    }    renderActivityPanel() {        if (this.state.activityIndex >= 0) {            var currentTitles = this.props.data[this.state.activityIndex];            var heightStyle = {};            if (this.props.maxHeight && this.props.maxHeight < currentTitles.length * 44) {                heightStyle.height = this.props.maxHeight;            }            return (                
                          
       
         this.openOrClosePanel(this.state.activityIndex)} activeOpacity={1} style={
    {position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}>                        
                            
                           
       
                                {                            currentTitles.map((title, index) =>                                
        
                                             {
     this.renderChcek(index, title)}                                    
                                         
                                    )                        }                    
                       
                  );        } else {            return (null);        }    }    openOrClosePanel(index) {        this.props.bannerAction ? this.props.bannerAction() : null;        // var toValue = 0.5;        if (this.state.activityIndex == index) {            this.closePanel(index);            this.setState({                activityIndex: -1,            });            // toValue = 0;        } else {            if (this.state.activityIndex > -1) {                this.closePanel(this.state.activityIndex);            }            this.openPanel(index);            this.setState({                activityIndex: index,            });            // toValue = 0.5;        }        // Animated.timing(        //   this.state.rotationAnims[index],        //   {
             //     toValue: toValue,        //     duration: 300,        //     easing: Easing.linear        //   }        // ).start();    }    openPanel(index) {        Animated.timing(            this.state.rotationAnims[index],            {                toValue: 0.5,                duration: 300,                easing: Easing.linear            }        ).start();    }    closePanel(index) {        Animated.timing(            this.state.rotationAnims[index],            {                toValue: 0,                duration: 300,                easing: Easing.linear            }        ).start();    }    itemOnPress(index) {        if (this.state.activityIndex > -1) {            var selectIndex = this.state.selectIndex;            selectIndex[this.state.activityIndex] = index;            this.setState({                selectIndex: selectIndex            });            if (this.props.handler) {                this.props.handler(this.state.activityIndex, index);            }        }        this.openOrClosePanel(this.state.activityIndex);    }    renderDropDownArrow(index) {        var icon = this.props.arrowImg ? this.props.arrowImg : this.defaultConfig.arrowImg;        return (            
              );    }    render() {        return (            
                      
       
                            {                        this.props.data.map((rows, index) =>                            
                                        
                                             
          
                                                   {rows[this.state.selectIndex[index]]}                                    
                                              {
    this.renderDropDownArrow(index)}                                
                                     
                                )                    }                
                       {
    this.props.children}                {
     this.renderActivityPanel()}            
              );    }}DropdownMenu.propTypes = {    bgColor: PropTypes.string,    tintColor: PropTypes.string,    activityTintColor: PropTypes.string,    arrowImg: PropTypes.number,    checkImage: PropTypes.number,    data: PropTypes.array,    bannerAction: PropTypes.func,    optionTextStyle: PropTypes.object,    titleStyle: PropTypes.object,    maxHeight: PropTypes.number}const styles = StyleSheet.create({    title_style: {        fontSize: 16    },    item_text_style: {        color: '#fdd000',        fontSize: 16    }});export default DropdownMenu;

下拉列表封装

　　如何使用？

render() {        var data = [["分类", "分类", "分类", "分类"], ["价格", "价格"], ["筛选", "筛选"]];        return (            
                      
                       
        
          this.setState({text: data[selection][row]})}                    data={data}                >                    
                         
                    
               );    }