React-Native 之 组件化开发

时间  2019-11-24
标签 react native 组件 开发 栏目 React 繁體版
原文   原文链接

前言

  • 学习本系列内容须要具有必定 HTML 开发基础，没有基础的朋友能够先转至 HTML快速入门(一) 学习react

  • 本人接触 React Native 时间并非特别长，因此对其中的内容和性质了解可能会有所误差，在学习中若是有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢android

  • 文章初版出自简书，若是出现图片或页面显示问题，烦请转至 简书 查看 也但愿喜欢的朋友能够点赞，谢谢ios

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组件化综合实例

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

微信登陆界面.png

  • 先来建立JS文件,初始化一下格式并在index.ios.js中使用这个组件
    建立组件JS文件.gif
    • 初始化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>
            );
        }
    }

    效果：react-native

    初始化并使用组件.png

  • 咱们把界面总体分为上下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
        }
    });

    效果：
    大致结构搭建效果.png微信

  • 接着咱们来具体完成上面登陆框中的各个模块
    • 视图部分


    // 视图
    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
        }
    });

    效果：
    上部分结构效果.png组件化

  • 如今咱们把测试用的背景色去掉看看效果，是否是很接近微信的界面了
    效果：
    上部分实际效果.png学习

  • 接下来咱们来完成下半部分
    • 视图部分


    {/* 下部更多登陆方式 */}
    <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'
    }

    效果：
    下部分效果.png测试

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

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


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

    效果：
    封装更多触摸事件.gifui

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

    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;

    效果：
    总体效果.gif

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程