React Native 之组件化开发

Posted 2022-12-12 黑森林工作室

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native 之组件化开发相关的知识，希望对你有一定的参考价值。

前言

学习本系列内容需要具备一定 html 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至简书查看也希望喜欢的朋友可以点赞，谢谢

React Native组件化介绍

React Native的核心思想就是组件化，相当于MVC的view,因此开发应用的最佳方式就是将功能组件化
组件化最大的优点可以使android和ios能够很方便地用很少地代码使用同一套组件，增加代码的复用性

React Native的组件化很简单，基本步骤如下

引用需要的库

    // 引用
    import React,  Component  from 'react';
    import 
        需要用到的组件库
     from 'react-native';

实例化视图入口

    // 实例化视图入口
    // 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式
    var 组件名 = React.createClass(
        render()
            return(
                需要实例化的视图
            );
        
    );

视图样式入口

    // 视图样式入口
    // 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式
    var styles = StyleSheet.create(
        相应视图的样式
    );

注册并输出组件

    module.exports = 组件名;

生成组件后就可以在ios和android中使用生成后的组件了

引入组件库

    // 引入组件库
    var 自定义组件名 = require('./组件名');

使用生成的组件

    export default class TestRN2 extends Component 
        render() 
            return (
            <自定义组件名></自定义组件名>
            );

到此，组件化就简单介绍到这，下面用一个综合的实例来更好地帮助理解

React Native组件化综合实例

这边我们通过完成微信的登录界面这个实例来详细讲组件化的使用，先来看看微信登录界面长啥样

先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件

初始化JS格式

    import React,  Component  from 'react';
        import 
            AppRegistry,
            StyleSheet,
            Text,
            View,
            Image,
            TextInput,
            TouchableOpacity
         from 'react-native';

    // 实例化入口
    var Login = React.createClass(
        render() 
            return (
                <View style=styles.container>

                </View>
            );
        
    );

    // 样式
    var styles = StyleSheet.create(
        container: 
            flex:1,
            // 背景色
            backgroundColor:'white'
        ,
    );

    // 注册输出组件
    module.exports = Login;

使用组件

    import React,  Component  from 'react';
    import 
        AppRegistry,
        StyleSheet
     from 'react-native';

    // 引用Login组件
    var Login = require('./Login');

    export default class WeiXin extends Component 
        render() 
            return (
                <View style=styles.container>
                    /* 登录模块 */
                    <Login></Login>
                </View>
            );

效果：

我们把界面整体分为上下2大部分，先将这两部分搞出来

视图部分

    // 视图
    var Login = React.createClass(
        render() 
            return(
                <View style=styles.container>
                    /* 上部登录框 */
                    <View style=styles.loginViewStyle>

                    </View>
                    /* 下部更多登录方式 */
                    <View style=styles.moreLoginViewStyle>

                    </View>
                </View>
            );
        
    );

样式部分

    // 样式
    var styles = StyleSheet.create(

        container: 
            flex:1,
            // 背景色
            backgroundColor:'white',
            // 对齐方式
            justifyContent:'space-between',
            alignItems:'center'
        ,

        loginViewStyle: 
            // 尺寸
            width:width * 0.9,
            height:300, // 预设，等会会清除
            // 背景色
            backgroundColor:'red',
            // 上边距
            marginTop:85
        ,

        moreLoginViewStyle: 
            // 尺寸
            width:width * 0.9,
            height:40,  // 预设，等会会清除
            // 背景色
            backgroundColor:'red',
            // 下边距
            marginBottom:30
        
    );

效果：

接着我们来具体完成上面登录框中的各个模块

视图部分

    // 视图
    var Login = React.createClass(
        render() 
            return(
                <View style=styles.container>
                    /* 上部登录框 */
                    <View style=styles.loginViewStyle>
                        /* 头像 */
                        <Image source=uri:'icon' style=styles.iconStyle></Image>
                        /* 账号 */
                        <Text style=fontSize:17, margin:10>12345</Text>
                        /* 密码输入框 */
                        <View style=styles.passwordViewStyle>
                            /* 左边图片 */
                            <Image source=uri:'password' style=styles.passwordImageStyle></Image>
                            /* 右边输入框 */
                            <TextInput style=styles.passwordInputStyle
                               placeholder='请填写密码'
                    ></TextInput>
                        </View>
                        /* 登录按钮 */
                        <View style=styles.loginButtonStyle>
                            <Text style=fontSize:17, color:'white'>登 录</Text>
                        </View>
                        /* 忘记密码选项 */
                        <Text style=fontSize:15, color:'blue', marginTop: 15>登录遇到问题?</Text>
                    </View>
                    /* 下部更多登录方式 */
                    <View style=styles.moreLoginViewStyle>

                    </View>
                </View>
            );
        
    );

样式部分

    // 样式
    var styles = StyleSheet.create(

        container: 
            flex:1,
            // 背景色
            backgroundColor:'white',
            // 对齐方式
            justifyContent:'space-between',
            alignItems:'center'
        ,

        loginViewStyle: 
            // 尺寸
            width:width * 0.9,
            // 背景色
            backgroundColor:'red',
            // 上边距
            marginTop:85,
            // 对齐方式
            alignItems:'center'
        ,

        iconStyle: 
            // 尺寸
            width:iconWH,
            height:iconWH
        ,

        passwordViewStyle: 
            // 尺寸
            width:width * 0.9,
            height:passwordViewH,
            // 背景色
            backgroundColor:'yellow',
            // 上边距
            marginTop:20,
            // 主轴方向
            flexDirection:'row',
            // 对齐方式
            alignItems:'center',
            // 下边框
            borderBottomWidth:1,
            borderBottomColor:'green'
        ,

        passwordImageStyle: 
            // 尺寸
            width:passwordImageWH,
            height:passwordImageWH,
            // 图片填充方式
            resizeMode:'contain',
            // 左边距
            marginLeft:passwordMargin
        ,

        passwordInputStyle: 
            // 尺寸
            width:width * 0.9 - (passwordMargin * 3 + passwordImageWH),
            height:passwordViewH,
            // 背景色
            backgroundColor:'white',
            // 左边距
            marginLeft:passwordMargin
        ,

        loginButtonStyle: 
            // 尺寸
            width:width * 0.9,
            height:44,
            // 背景色
            backgroundColor:'green',
            // 上边距
            marginTop:20,
            // 居中对齐
            justifyContent:'center',
            alignItems:'center'
        ,

        moreLoginViewStyle: 
            // 尺寸
            width:width * 0.9,
            height:40,
            // 背景色
            backgroundColor:'red',
            // 下边距
            marginBottom:30
        
    );

效果：

现在我们把测试用的背景色去掉看看效果，是不是很接近微信的界面了
效果：

接下来我们来完成下半部分

视图部分

    /* 下部更多登录方式 */
    <View style=styles.moreLoginViewStyle>
        <Text style=color:'blue', fontSize:17>更多</Text>
    </View>

样式部分

    moreLoginViewStyle: 
        // 尺寸
        width:width * 0.9,
        height:40,
        // 背景色
        backgroundColor:'red',
        // 下边距
        marginBottom:30,
        // 对齐方式
        alignItems:'center',
        justifyContent:'center'

效果：

去掉测试时候的背景色，界面就搭建完毕了，效果如下
效果：

接下来就是让图片、按钮、忘记密码、更多这几个标签拥有接受触摸事件并做出反应的能力，这边就以更多为例

包装示例

    <TouchableOpacity
        activeOpacity=0.5
        onPress=() => alert('点击了更多')
    >
        /* 下部更多登录方式 */
        <View style=styles.moreLoginViewStyle>
            <Text style=color:'blue', fontSize:17>更多</Text>
        </View>
    </TouchableOpacity>

效果：

最后将组件完整的代码和效果图贴出来，供参考

    import React,  Component  from 'react';
    import 
        AppRegistry,
        StyleSheet,
        Text,
        View,
        TextInput,
        Image,
        TouchableOpacity
     from 'react-native';

    var Dimensions = require('Dimensions');
    var width, height = Dimensions.get('window');

    // 常用参数
    var iconWH = 70;
    var passwordViewH = 30;
    var passwordImageWH = 25;
    var passwordMargin = 5;


    // 视图
    var Login = React.createClass(
        render() 
            return(
                <View style=styles.container>
                    /* 上部登录框 */
                    <View style=styles.loginViewStyle>
                        <TouchableOpacity
                            activeOpacity=0.5
                            onPress=() => alert('点击了头像')
                        >
                        /* 头像 */
                        <Image source=uri:'icon' style=styles.iconStyle></Image>
                        </TouchableOpacity>
                        /* 账号 */
                        <Text style=fontSize:17, margin:10>12345</Text>
                        /* 密码输入框 */
                        <View style=styles.passwordViewStyle>
                            /* 左边图片 */
                            <Image source=uri:'password' style=styles.passwordImageStyle></Image>
                            /* 右边输入框 */
                            <TextInput style=styles.passwordInputStyle
                               placeholder='请填写密码'
                            ></TextInput>
                        </View>
                        <TouchableOpacity
                            activeOpacity=0.5
                            onPress=() => alert('点击了登录按钮')
                        >
                        /* 登录按钮 */
                        <View style=styles.loginButtonStyle>
                            <Text style=fontSize:17, color:'white'>登 录</Text>
                        </View>
                        </TouchableOpacity>
                        <TouchableOpacity
                            activeOpacity=0.5
                            onPress=() => alert('点击了忘记密码选项')
                        >
                        /* 忘记密码选项 */
                        <Text style=fontSize:15, color:'blue', marginTop: 15>登录遇到问题?</Text>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity
                        activeOpacity=0.5
                        onPress=() => alert('点击了更多')
                    >
                    /* 下部更多登录方式 */
                    <View style=styles.moreLoginViewStyle>
                        <Text style=color:'blue', fontSize:17>更多</Text>
                    </View>
                    </TouchableOpacity>
                </View>
            );
        
    );

    // 样式
    var styles = StyleSheet.create(

        container: 
            flex:1,
            // 背景色
            backgroundColor:'white',
            // 对齐方式
            justifyContent:'space-between',
            alignItems:'center'
        ,

        loginViewStyle: 
            // 尺寸
            width:width * 0.9,
            // 上边距
            marginTop:85,
            // 对齐方式
            alignItems:'center'
        ,

        iconStyle: 
            // 尺寸
            width:iconWH,
            height:iconWH
        ,

        passwordViewStyle: 
            // 尺寸
            width:width * 0.9,
            height:passwordViewH,
            // 上边距
            marginTop:20,
            // 主轴方向
            flexDirection:'row',
            // 对齐方式
            alignItems:'center',
            // 下边框
            borderBottomWidth:1,
            borderBottomColor:'green'
        ,

        passwordImageStyle: 
            // 尺寸
            width:passwordImageWH,
            height:passwordImageWH,
            // 图片填充方式
            resizeMode:'contain',
            // 左边距
            marginLeft:passwordMargin
        ,

        passwordInputStyle: 
            // 尺寸
            width:width * 0.9 - (passwordMargin * 3 + passwordImageWH),
            height:passwordViewH,
            // 左边距
            marginLeft:passwordMargin
        ,

        loginButtonStyle: 
            // 尺寸
            width:width * 0.9,
            height:44,
            // 背景色
            backgroundColor:'green',
            // 上边距
            marginTop:20,
            // 居中对齐
            justifyContent:'center',
            alignItems:'center'
        ,

        moreLoginViewStyle: 
            // 尺寸
            width:width * 0.9,
            height:40,
            // 下边距
            marginBottom:30,
            // 对齐方式
            alignItems:'center',
            justifyContent:'center'
        
    );

    module.exports = Login;

效果：

以上是关于React Native 之组件化开发的主要内容，如果未能解决你的问题，请参考以下文章

React Native开发React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)

React Native开发React Native控件之WebView组件详解以及实例使用(22)

React Native 之组件化开发

React Native 开发之 (08) FlexBox例子

react-native 获取组件的宽度和高度

react-native 自定义下拉刷新 / 上拉加载更多组件

React Native 之 组件化开发

前言

React Native组件化介绍

React Native组件化综合实例

React Native 之组件化开发