一.View
- 一般用于容器，放子组件
- 不能监听点击事件
二.TouchableOpacity
- 外层包装一个TouchableOpacity，View就能实现点击
- 实现点击后会出现透明效果，通过属性activeOpacity进行调整，0表示完全透明，1表示不透明
- 注意：onPress与onPressIn，onPressOut，有冲突，不要同时实现
<View style={styles.mainStyle}>
<TouchableOpacity activeOpacity={0.7}
onPress={()=>{
alert('点击')
}}
onLongPress={()=>{
alert('长按')
}}
onPressIn={()=>{
alert('手指按下')
}}
onPressOut={()=>{
alert('手指抬起')
}}
disabled={true}
>
<View style={styles.redViewStyle}></View>
</TouchableOpacity>
</View>
- disabled属性设置为true可以禁止组件交互
三.Text
- 常用属性：
numberOfLines:最大行数
selectable:决定客户是否可以选中文本复制粘贴，默认false
suppressHighlighting：默认有灰色阴影，想取消就设置为true
- 监听文字点击：onPress
<Text numberOfLines={1}
selectable={true}
style={styles.textStyle}
onPress={()=>{
console.log('点击文本');
}}
suppressHighlighting={true}
>
Hello
</Text>
- 常用样式属性
color：字体颜色
fontSize:字体 fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字体的粗细。大多数字体都支持'normal'和'bold'值。如果某个字体不支持，则会自动选择最接近的值。
lineHeight：行高
textAlign enum('auto', 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持，在Android上会变为left
四.Button
- Button设置样式无效，开发中一般不用，使用text的点击事件代替
- 常用属性：
color color :文本的颜色(iOS)，或是按钮的背景色(Android)
disabled bool :设置为true时此按钮将不可点击
onPress function :用户点击此按钮时所调用的处理函数
title string :按钮内显示的文本
<Button title="按钮"
color='red'
onPress={()=>{
alert('点击按钮')
}}
>
</Button>
五.TextInput
- 默认没有边框，需要自己添加borderWidth
- 常用属性
autoFocus：自动获取焦点, 如果为true，在componentDidMount后会获得焦点。默认为false
blurOnSubmit: true按回车时候自动退出键盘，但必须是英文键盘
editable:文本框是否可以编辑，默认值为true
keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 键盘类型
maxLength:最大字符数，显示输入文本长度
multiline:默认文本输入框只能一行，true可多行输入
placeholder: 占位文字
placeholderTextColor：占位字符串显示的文字颜色
returnKeyType enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') #：决定键盘右下角按钮显示的内容
secureTextEntry：是否安全输入,注意：多行无效果
selectionColor:设置光标颜色
clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') : 显示“清除”按钮
clearTextOnFocus: 重新获取焦点后，是否清空之前的文本
enablesReturnKeyAutomatically: 默认false。为true时，文本框内没有文字的时候，键盘禁用确认按钮。
- 常用方法
// 清空输入框的内容
clear()
- 监听文本框事件
onBlur:文本框失去焦点
onChange：内容变化
onChangeText: 内容变化时调用此函数, 改变后的文字作为参数传递
onEndEditing:当文本输入结束后调用此回调函数
onFocus:当文本框获得焦点的时候调用此回调函数
onSubmitEditing:此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用
onKeyPress:当一个键被按下的时候调用此回调。传递给回调函数的参数为{ nativeEvent: { key: keyValue } }，其中keyValue即为被按下的键。会在onChange之前调用
<View style={styles.mainViewStyle}>
<TextInput placeholder={'占位文字'}
style={styles.textStyle}
//multiline={true}
clearButtonMode="always"
secureTextEntry={true}
autoFocus={true}
blurOnSubmit={true}
selectionColor="red"
clearTextOnFocus="true"
onBlur={()=>{
console.log('文本框失去焦点');
}}
onChangeText={(text)=>{
console.log('文字改变'+text)
}}
onEndEditing={()=>{
console.log('文本框结束编辑');
}}
onFocus={()=>{
console.log('获取焦点');
}}
onSubmitEditing={()=>{
console.log('点击提交按钮');
}}
/>
</View>
六.Image
- 设置网络图片
- uri加载注意：通过uri加载资源，必须设置图片尺寸，否则不显示
<Image source={{uri:'http://img01.youxiaoshuo.com/portal/201703/21/083647y43dl1j14s8s3g99.jpg'}}
style={styles.imageStyle}
/>
- 加载RN中图片
<Image source={require('./Img/chaolan.jpeg')}
style={styles.imageStyle}
/>
- 加载iOS中图片
<Image source={{uri:'wukong'}}
style={styles.imageStyle}
/>
- Image常用属性
blurRadius ：图片模糊
defaultSource {uri: string, width: number, height: number, scale: number}
:占位图片
resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center')
决定图片尺寸大小
cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸
contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸
stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器
repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用
center: 居中不拉伸
- 本地图片存放位置
- RN项目中
- xcode项目中
- 可以存放到RN的安卓项目中, 放入drawable-xxhdpi文件中
安卓的图片名称，不能以数字开头，也不能有大写字母
自己生成drawable-xxhdpi文件夹，把图片放进去，然后把文件夹drawable-xxhdpi存放到安卓文件中res文件夹中
网友评论