React Native 之 组件化开发
MarSkidmore
8年前
<h2>前言</h2> <ul> <li> <p>学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 <a href="/misc/goto?guid=4959723871313717555" rel="nofollow,noindex">HTML快速入门(一)</a> 学习</p> </li> <li> <p>本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢</p> </li> </ul> <h2>React Native组件化介绍</h2> <ul> <li>React Native的核心思想就是组件化，相当于MVC的view,因此开发应用的最佳方式就是将功能组件化</li> <li>组件化最大的优点可以使Android和iOS能够很方便地用很少地代码使用同一套组件，增加代码的复用性</li> <li>React Native的组件化很简单，基本步骤如下 <ul> <li>引用需要的库</li> </ul> <pre> <code class="language-javascript">// 引用 import React, { Component } from 'react'; import { 需要用到的组件库 } from 'react-native';</code></pre> <ul> <li>实例化视图入口</li> </ul> <pre> <code class="language-javascript">// 实例化视图入口 // 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式 var 组件名 = React.createClass({ render(){ return( 需要实例化的视图 ); } });</code></pre> <ul> <li>视图样式入口</li> </ul> <pre> <code class="language-javascript">// 视图样式入口 // 因为现在还是在想ES6转化过程中，为了更好的兼容性，这边使用的是ES5的格式 var styles = StyleSheet.create({ 相应视图的样式 });</code></pre> <ul> <li>注册并输出组件</li> </ul> <pre> <code class="language-javascript">module.exports = 组件名;</code></pre> </li> <li>生成组件后就可以在ios和android中使用生成后的组件了 <pre> <code class="language-javascript">// 引入组件库 var 自定义组件名 = require('./组件名');</code></pre> <ul> <li>使用生成的组件</li> </ul> <pre> <code class="language-javascript">export default class TestRN2 extends Component { render() { return ( <自定义组件名></自定义组件名> ); } }</code></pre> </li> <li>到此，组件化就简单介绍到这，下面用一个综合的实例来更好地帮助理解</li> </ul> <h2>React Native组件化综合实例</h2> <ul> <li>这边我们通过完成微信的登录界面这个实例来详细讲组件化的使用，先来看看微信登录界面长啥样</li> </ul> <p><img src="https://simg.open-open.com/show/1dee6f887077323cc8a192691b0b1c3c.png"></p> <ul> <li>先来创建JS文件,初始化一下格式并在index.ios.js中使用这个组件<br> <img src="https://simg.open-open.com/show/1607cb5b86b7079dca5fc0354678f268.gif"> <ul> <li>初始化JS格式</li> </ul> <pre> <code class="language-javascript">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;</code></pre> <pre> <code class="language-javascript">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> ); } }</code></pre> <p>效果：</p> <p><img src="https://simg.open-open.com/show/2330a39704f700fb8d5652c2f8e6c18e.png"></p> </li> <li>我们把界面整体分为上下2大部分，先将这两部分搞出来 <pre> <code class="language-javascript">// 视图 var Login = React.createClass({ render() { return( <View style={styles.container}> {/* 上部登录框 */} <View style={styles.loginViewStyle}> </View> {/* 下部更多登录方式 */} <View style={styles.moreLoginViewStyle}> </View> </View> ); } });</code></pre> <pre> <code class="language-javascript">// 样式 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 } });</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/53a039437cd1342bdcc268325c3acbe3.png"></li> <li>接着我们来具体完成上面登录框中的各个模块 <pre> <code class="language-javascript">// 视图 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> ); } });</code></pre> <pre> <code class="language-javascript">// 样式 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 } });</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/3f98a4b472b7a338a3b46143174cced4.png"></li> <li> <p>现在我们把测试用的背景色去掉看看效果，是不是很接近微信的界面了</p> <p>效果：</p> <img src="https://simg.open-open.com/show/fab9ace4645cca0c73673cacf05d5ff0.png"></li> <li>接下来我们来完成下半部分 <pre> <code class="language-javascript">{/* 下部更多登录方式 */} <View style={styles.moreLoginViewStyle}> <Text style={{color:'blue', fontSize:17}}>更多</Text> </View></code></pre> <pre> <code class="language-javascript">moreLoginViewStyle: { // 尺寸 width:width * 0.9, height:40, // 背景色 backgroundColor:'red', // 下边距 marginBottom:30, // 对齐方式 alignItems:'center', justifyContent:'center' }</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/0972b9d96f39853da162e23a09a66a12.png"></li> <li> <p>去掉测试时候的背景色，界面就搭建完毕了，效果如下</p> <p>效果：</p> <img src="https://simg.open-open.com/show/3cd56c6ff4068c9db1790e6533b124ee.png"></li> <li>接下来就是让图片、按钮、忘记密码、更多这几个标签拥有接受触摸事件并做出反应的能力，这边就以 更多 为例 <pre> <code class="language-javascript"><TouchableOpacity activeOpacity={0.5} onPress={() => {alert('点击了更多')}} > {/* 下部更多登录方式 */} <View style={styles.moreLoginViewStyle}> <Text style={{color:'blue', fontSize:17}}>更多</Text> </View> </TouchableOpacity></code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/4d7344dbfaa5fdc3998b5c666915d782.gif"></li> <li> <p>最后将组件完整的代码和效果图贴出来，供参考</p> <pre> <code class="language-javascript">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;</code></pre> <p>效果：</p> <img src="https://simg.open-open.com/show/4e40fe073c13b47797b54e04f98f3c57.gif"></li> </ul> <p> </p> <p>来自：http://www.cnblogs.com/miaomiaoshen/p/6035042.html</p> <p> </p>