2019 December 25 React, Native

跨平台开发RN-常用组件

React Native常用组件

组件Image

需要导入’Image’

Image组件的基本用法

从当前项目中加载图片
```
 <Image source={require('./img/2.png')} style={*width: 120, height: 120}}  />
```
1. React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。
加载使用APP中的图片
```
 <Image source={require('image!icon_homepage_map')} style={*width: 50,height:50}}/>
```
1. 使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)

加载来自网络的图片

 <Image source={*uri:'https://www.baidu.com/img/bd_logo1.png'}} style={*flex:1,width:200, height:100, resizeMode: Image.resizeMode.cover}}/>

一定需要指定图片的尺寸大小

 Image.resizeMode.cover：图片居中显示，没有被拉伸，超出部分被截断；
 Image.resizeMode.contain：容器完全容纳图片，图片等比例进拉伸；
 Image.resizeMode.stretch： 图片被拉伸适应容器大小，有可能会发生变形。

设置图片为背景

 <Image source={*uri:'https://www.baidu.com/img/bd_logo1.png'}} style={*flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>
    <Text style={*marginTop: 60, backgroundColor: 'red'}}>下面是背景图片</Text>
 </Image>

代码举例：

九宫格图片

 import React, {Component} from 'react';
 import {View, StyleSheet, Text, Image, Dimensions} from 'react-native';
        
 //定义全局变量
        
 //导入包的json数据：{"data":[{},{}]}
 var Badgedata = require('./resources/BadgeData');
 //获取到屏幕尺寸
 var {width} = Dimensions.get('window');
 //每个盒子的宽度、列数
 var boxW = 100;
 var boxls = 3;
 //间距
 var vmargin = (width - boxls * boxW) / (boxls + 1);
 var hmargin = 25;
        
 //貌似必须这么写
 export default class Enty extends Component {
   render() {
     return (
       <View style={styles.container}>
         {/*调用函数*/}
         {this.renderAllBandge()}
       </View>
     );
   }
   //类的成员函数
   renderAllBandge() {
     //定义数组装所有的子组件
     var allBadge = [];
     //遍历json数据数据
     for (var i = 0; i < Badgedata.data.length; i++) {
       var badge = Badgedata.data[i];
       allBadge.push(
         //key值确保数组中每个元素都是唯一的
         <View key={i} style={styles.outViewStyle}>
           //uri: 加载iOS图片资源中的图片
           <Image source={*uri: badge.icon}} style={styles.imageStyle} />
           <Text sytle={styles.titlesStyle}>{badge.title}</Text>
         </View>,
       );
     }
     //返回数组
     return allBadge;
   }
 }
        
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
     //确定主轴的方向
     flexDirection: 'row',
     //多行显示
     flexWrap: 'wrap',
   },
   outViewStyle: {
     backgroundColor: 'green',
     //设置侧轴方向居中
     alignItems: 'center',
     width: boxW,
     height: boxW,
     //设置间距
     marginLeft: vmargin,
     marginTop: hmargin,
   },
   imageStyle: {
     //设置图片大小
     width: 80,
     height: 80,
   },
   titlesStyle: {},
 });

组件Textinput

TextInput的常见属性
1. 因为TextInput是继承自UIView，所以View的属性TextInput也能够使用，一些样式类的属性在学习的时候可以参照View的相关属性。
2. value ：字符串型,默认文字
3. onChangeText: 函数，监听用户输入的值
4. keyboardType: 键盘类型,决定打开哪种键盘，例如，数字键盘。
```
 enum('default', "ascii-capable", 'numbers-and-punctuation', 'url','number-pad', 'phone-pad', 'name-phone-pad', 'email-address', 'decimal-pad', 'twitter','web-search', "numeric")
```
5. multiline: 布尔型,如果值为真，文本输入可以输入多行。默认值为假。
6. password: 布尔型,如果值为真，文本输入框就成为一个密码区域。默认值为假。
7. placeholder: 字符串型,在文本输入之前字符串将被呈现出来，通常被称为占位文字
8. placeholderTextColor: 字符串型,占位符字符串的文本颜色
9. autoCorrect: 布尔型,如果值为假，禁用自动校正。默认值为真。
10. autoFocus: 布尔型,如果值为真，聚焦 componentDidMount 上的文本。默认值为假。
11. clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always'): 清除按钮出现在文本视图右侧的时机
12. editable: 如果值为假，文本是不可编辑的。默认值为真。
13. enablesReturnKeyAutomatically: 如果值为真，当没有文本的时候键盘是不能返回键值的，当有文本的时候会自动返回。默认值为假。
14. onBlur 函数: 当文本输入是模糊的，调用回调函数
15. onChange函数: 当文本输入的文本发生变化时，调用回调函数
16. onEndEditing 函数: 编辑状态
17. onFocus函数 :聚焦状态
18. returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call'): 决定返回键的样式
19. secureTextEntry 布尔型: 如果值为真，文本输入框就会使输入的文本变得模糊，以便于像密码这样敏感的文本保持安全。默认值为假。

代码示例：搭建登录界面

 import React, {Component} from 'react';
 import {
   View,
   StyleSheet,
   Text,
   Image,
   Dimensions,
   TextInput,
 } from 'react-native';
    
 var {width} = Dimensions.get('window');
 var margin = 25;
    
 //貌似必须这么写
 export default class Entry3 extends Component {
   render() {
     return (
       <View style={styles.container}>
         {/*头像*/}
         <Image source={require('./img/icon.png')} style={styles.iconStyle} />
         {/*账号、密码*/}
         <TextInput placeholder={'请输入用户名'} style={styles.textIStyle} />
         <TextInput
           placeholder={'请输入密码'}
           secureTextEntry={true}
           style={styles.textIStyle}
         />
         {/*登录按钮*/}
         <View style={styles.loginStyle}>
           <Text style={*color: 'white'}}>登 录</Text>
         </View>
         {/*忘记密码*/}
         <View style={styles.settingStyle}>
           <Text>无法登录</Text>
           <Text>新用户</Text>
         </View>
         <View style={styles.otherLoginStyle}>
           <Text>其他登录方式：</Text>
           <Image
             source={require('./img/icon3.png')}
             style={styles.otherImageStyle}
           />
           <Image
             source={require('./img/icon7.png')}
             style={styles.otherImageStyle}
           />
           <Image
             source={require('./img/icon8.png')}
             style={styles.otherImageStyle}
           />
         </View>
       </View>
     );
   }
 }
    
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#dddddd',
     //设置侧轴方向居中
     alignItems: 'center',
   },
   iconStyle: {
     width: 80,
     height: 80,
     borderRadius: 40,
     borderWidth: 5,
     borderColor: 'white',
     marginTop: 50,
     marginBottom: 30,
   },
   textIStyle: {
     height: 38,
     backgroundColor: 'white',
     marginBottom: 1,
     width: width - 2 * margin,
     //内容居中
     textAlign: 'center',
   },
   loginStyle: {
     height: 35,
     width: width - 2 * margin,
     backgroundColor: 'blue',
     //居中
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 8,
     marginTop: 30,
     marginBottom: 30,
   },
   settingStyle: {
     //修改主轴方向
     flexDirection: 'row',
     //设置主轴的对齐方式,
     justifyContent: 'space-between',
     width: width - 2 * margin,
   },
   //其他登录方式部分
   otherLoginStyle: {
     // backgroundColor: 'red',
     flexDirection: 'row',
     alignItems: 'center',
     //    绝对定位
     position: 'absolute',
     bottom: 10,
     left: 20,
   },
   otherImageStyle: {
     width: 50,
     height: 50,
     borderRadius: 25,
   },
 });

效果图：

Touchable系列组件

React Native中如何让视图对触发做出合适的响应呢？

高亮触摸 `TouchableHighlight`组件

当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。

常用属性：

 activeOpacity :设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)
 onHideUnderlay : 方法,当底层被隐藏的时候调用
 onShowUnderlay :方法,当底层显示的时候调用
 style : 可以设置控件的风格演示，该风格演示可以参考View组件的style
 underlayColor: 当触摸或者点击控件的时候显示出的颜色

不透明触摸`TouchableOpacity`组件

该组件封装了响应触摸事件；当点击按下的时候，该组件的透明度会降低。
常用属性：
1. activeOpacity：设置当用户触摸的时候，组件的透明度

常见的触摸事件

在开发中会经常的用到点击、按下、抬起、长按等触发事件，那么在TouchableOpacity中又是改如何展示呢？

如下示例：

 import React, {Component} from 'react';
 import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
    
 //ES5的写法,已经被抛弃
 // var Enty4 = React.createClass({});
    
 //ES6的写法,ESn：指JS的哪个版本
 class Enty4 extends Component {
   //初始化成员变量title
   constructor(props) {
     super(props);
     this.state = {
       title: '不透明触摸',
     };
   }
    
   render() {
     return (
       <View style={styles.container}>
         {/* 包装点击效果*/}
         <TouchableOpacity
           //设置点击透明度
           activeOpacity={0.5}
           onPress={() => this.activeEvent('点击')}
           onPressIn={() => this.activeEvent('按下')}
           onPressOut={() => this.activeEvent('抬起')}
           onLongPress={() => this.activeEvent('长按')}>
           <View style={*margin: 50, backgroundColor: 'red'}}>
             <Text>常用点击事件</Text>
           </View>
         </TouchableOpacity>
         {/*点击上面的View展示不同的title*/}
         <View>
           <Text>{this.state.title}</Text>
         </View>
       </View>
     );
   }
   //修改title的值
   activeEvent(event) {
     this.setState({
       title: event,
     });
   }
 }
    
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
   },
 });
    
 export default Enty4;

跨平台开发RN-常用组件

React Native常用组件

组件Image

组件Textinput

Touchable系列组件

高亮触摸 TouchableHighlight组件

不透明触摸TouchableOpacity组件

常见的触摸事件

高亮触摸 `TouchableHighlight`组件

不透明触摸`TouchableOpacity`组件