React-Native 第二章 Image和TextInput组件使用

Image组件使用

1.加载静态资源

通过require('图片文件相对本文件目录的路径')，并将其设置到Image组件的source属性即可。如下

	<Image
		style={styles.image}
		// ./表示当前文件目录 ../ 父目录
		source={require('./icon.png')}
	/>

2.加载原生资源

 对于加载这种图片资源和加载项目中的资源有点不一样，以android为例，如下加载drawable下的文件

    <Image
        source={{uri: 'launcher_icon'}}
        style={{width:30,height:30}} 
    />
    或者
    <Image
 	source={nativeImageSource({
 	        android: 'launcher_icon',
 	        width: 40,
 	        height:40
 	})}
 />

3.加载网络资源

加载网络图片需要指定样式的宽和高，否则图片不显示，如下

	<Image
		source={{uri: 'https://www.baidu.com/img/logo.png'}}
		style={{width:30,height:30}}
	/>

4.Image组件常用的属性

• style:
  • width: 设置宽
  • height: 设置高
  • bordeWidth: 设置边框宽度
  • borderColor: 设置边框颜色
  • backgroundColor: 设置背景色
  • opacity: 不透明度，值在0到1之间，1表示不透明，0表示透明
  • tintColor: 给图片着色，点击时变成其他颜色图片，此时可用此属性
• blurRadius: 设置图片的模糊半径，可模糊图片
• defaultSource: 给图片设置默认图片，用于加载网络成功之前显示的图片
• source: 可以接收一个数组作为参数，这样可以根据组件的宽和高自动加载与之匹配的宽和高的图片。如下

	<Image
       style={{flex: 1}}
       source={[
   			{uri: 'https://facebook.github.io/react/img/logo_small.png', width: 38, height: 38},
            {uri: 'https://facebook.github.io/react/img/logo_small_2x.png', width: 76, height: 76},          
            {uri: 'https://facebook.github.io/react/img/logo_og.png', width: 400, height: 400}]}
      />

• resizeMode
  该属性用来设置图片的缩放模式，对应值如下
  • cover: 保持图片宽高比，直到宽度和高度都大于等于容器视图的尺寸
  • contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图尺寸
  • stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器
  • center: 居中不拉伸
  • repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸
• ImageBackground
  Image组件的扩展，它支持嵌套组件，如下

	<ImageBackground
		style={{width:100,height: 100,backgroundColor:'red'}}
		source={{uri:'https://facebook,github.io/react/img/logo.png'}}
	>
		<Text style={styles.nestedText}>
			react
		</Text>
	</ImageBackground>

TextInput组件使用

• Value : 文本输入的默认值
• keyboardType: 设置键盘类型
• multiline: 如果值为真，文本输入可以输入多行。默认值为假
• password: 如果值为真，文本输入框就成为一个密码区域，默认值为假
• placeholder: 在文本输入之前提示用户文本框功能，也就是占位文字
• placeholderTextColor: 占位字符串的文本颜色
• autoCapitalize: 控制TextInput是否要自动将特定字符切换为大写
  • none : 不自动使用任何东西
  • sentences : 每个句子的首字母（默认）
  • words : 每一个单词的首字母
  • characters : 所有字符
• autoCorrect : 如果为false,会关闭拼写自动修正。默认值是true.
• autoFocus : 如果为true, 在conponentDidMount后会获得焦点。默认值为 false.
• clearButtonMode : 清除按钮出现的时机
  • never : 不出现
  • while-editing : 编辑的时候出现
  • unless-editing : 没有编辑时出现
  • always : 总是出现
• clearTextOnFocus : 如果为true,每次开始输入的时候都会清除文本框的内容
• editable : 如果值为假，文本是不可编辑，默认值为真
• enablesReturnKeyAutomaticaly : 如果为true, 键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
• returnKeyType : 决定返回键的样式
  • default
  • go
  • google
  • join
  • next
  • route
  • search
  • send
  • yahoo
  • done
  • emergency-call
• secureTextEntry : 如果值为真，文本输入框就会使输入的文本变模糊，以便于像密码这样敏感的文本保持安全，类似password属性，默认值为假
• onChange : 当文本框内容变化时调用此回调函数 如

<View style={styles.container}>
            {/* 文本输入框 */}
          <TextInput
              style={styles.textInputStyle}
                onChange={() => {alert('文本框内容改变')}} >
           </TextInput>
  </View>

• onChangeText : 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递

	<View style={styles.container}>
            {/* 文本输入框 */}
          <TextInput
              style={styles.textInputStyle}
              onChangeText={(Text) => {alert('文字改变')}}>
           </TextInput>
  </View>

• onFocus : 当文本框获得焦点的时候调用此回调函数

	<View style={styles.container}>
            {/* 文本输入框 */}
          <TextInput
              style={styles.textInputStyle}
              onFocus={() => {alert('文本框获得焦点')}}>
           </TextInput>
  </View>

• onBlur : 当文本框失去焦点的时候调用此回调函数

	<View style={styles.container}>
            {/* 文本输入框 */}
          <TextInput
              style={styles.textInputStyle}
              onBlur={() => {alert('失去焦点')}}>
           </TextInput>
  </View>

• onEndEditing : 结束编辑时，调用回调函数

	<View style={styles.container}>
            {/* 文本输入框 */}
          <TextInput
              style={styles.textInputStyle}
              onEndEditing={() => {alert('结束文本编辑')}}>
           </TextInput>
  </View>