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大部分，先将这两部分搞出来

  • 视图部分