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

---

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

微信登录界面.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>
              );
          }
      }
  
  

  效果：

  初始化并使用组件.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

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

  
  界面搭建完毕效果.png

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

  • 包装示例
    
    
    

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

  效果：

  
  封装更多触摸事件.gif

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

      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