React Native 基础组件详解＜一＞

一、Text组件

1）numberOfLines：显示行数

2）ellipsizeMode：超出隐藏的位置 clip->裁掉 head/middle/ tail->点的位置

3）selectable: 是否可以选中

4）selectionColor：选中后的颜色

5）allowFontScaling: 跟随系统字体大小变化

export default () => {
    return (
        <View style={styles.root}>
            <Text 
                style={styles.txt}
                numberOfLines={2}
                ellipsizeMode="tail">
                我是基础组件Text我是基础组件Text我是基础组件Text
            </Text>
            <Text 
                style={styles.txt}
                selectable={true}
                selectionColor="yellow">
                我是基础组件Text2
            </Text>
            <Text 
                style={styles.txt}
                onPress={() => {
                    console.log('我点')
                }}
                onLongPress={() => {
                    console.log('我长按')
                }}
            >
                我是可以点击的基础组件Text3
            </Text>
        </View>
    );
}

二、Image组件

1）source：图片源 注意：本地和远程图片的区别

2）defaultSource：占位图片

3）resizeMode：缩放模式 content/center/cover/repeat/stretch

4）blurRadius： 模糊

5）tintColor： 用于改变图标颜色（重要）

<Image
    style={styles.img} 
     source={iconSetting} // 本地图片
     resizeMode='contain'
     blurRadius={2} />

<Image 
     style={styles.img} 
     defaultSource={iconSetting} // 网络图没有加载出来的占位
     source={{uri: imageUri}} /> // 网络图片

<Image
     style={styles.img2} 
      source={iconSetting} />


// ...
img2: {
        tintColor: 'red'
    }

三、ImageBackground组件

View和Image的结合

1）style：容器的样式

2）imageStyle： 背景图的样式

<ImageBackground
    style={styles.card}
    imageStyle={styles.bg}
    source={cardBg}>
    <Text style={styles.txt}>我是内容</Text>
</ImageBackground>

// ...
card: {
   width: '100%',
    height: 150,
    flexDirection: 'row',
    alignItems: 'center',
},
bg: {
    opacity: .8,
    borderRadius: 12,
},

四、TextInput组件

1）自动聚焦：autoFocus = true 或者ref.focus()

2）自动失焦：blurOnSubmit = true 或者ref.blur()

3）defaultValue：默认内容

4）editable：是否可以输入 false是不能输入

5）keyboardType：键盘类型 number-pad(数字)

6）returnKeyType：确定键 done/go/next/send/search

7）maxLength：最大长度

8）multiline：是否允许多行

9）numberOfLines：显示的行数

10）selection：选中内容 {{start: 0 , end: 3}} 值是index

11）selectionColor： 选中的颜色

12）selectTextOnFocus：第一次手动聚焦时，是否选中全部内容

13）secureTextEntry：是否密码模式， 不可与multiline=true同用

<TextInput
     ref={inputRef}
     style={styles.input}
     // autoFocus={true}
     blurOnSubmit={true}
     caretHidden={false}
     defaultValue="我是默认的内容"
     editable={true}
     keyboardType='number-pad'
     returnKeyType='search'
     // maxLength={11}
     // multiline={true}
     // numberOfLines={2}
     onFocus={() => {
         
     }}
     onBlur={() => {

     }}
     onChange={(event) => {
         console.log(event.nativeEvent);
     }}
     onChangeText={(text) => {
         console.log(text);
     }}
     // selection={{start: 0, end: 3}}
     selectionColor='red'
     selectTextOnFocus={true}
     secureTextEntry={true}
 />

// ...
input: {
    width: '100%',
     height: 50,
     backgroundColor: '#ccc',
     fontSize: 24,
     color: '#000',
     fontWeight: 'bold',
 },

五、TouchableOpacity组件 --- 点击组件

activeOpacity：点击时不透明度的变化

<TouchableOpacity
     style={styles.button}
     activeOpacity={0.5}// x ~ 1不透明度变化范围
     onPress={() => {
         console.log('点击 ...');
     }}
     onLongPress={() => {
         console.log('长按 ...');
     }}
     delayLongPress={1000} // 长按规定时间
     onPressIn={() => {
         console.log('按下去 ...');
     }}
     onPressOut={() => {
         console.log('抬起来 ...');
     }}
 >
     <Text style={styles.txt}>按钮</Text>
 </TouchableOpacity>

六、TouchableHighlight组件 -- 点击组件

underlayColor：按下去时高亮颜色

注意：1）只能有一个子节点

2）activeOpacity单个使用没有效果，必须和onPress一起用点击时才有不透明过渡效果

<TouchableHighlight
     style={styles.button}
     activeOpacity={0.8}
     onPress={() => {
         console.log('onPress ...');
     }}
     underlayColor="#00bcd4"
 >
     <Text style={styles.txt}>按钮</Text>
 </TouchableHighlight>

七、TouchableWithoutFeedback组件 -- 几乎不用

注意：只支持一个子节点，而且自身不支持样式

<TouchableWithoutFeedback>
     <Viewstyle={styles.button}>
         <Text style={styles.txt}>按钮</Text>
     </View>
 </TouchableWithoutFeedback>

八、Button组件

1）title：必须

2）color：按钮颜色 ，不设置默认为蓝色

3）disabled：是否置灰

注意：不可定制样式

<Button
    title='按 钮'
    // color={"green"}
    // disabled={true}
    onPress={() => {

    }}
/>

九、ScrollView组件

1）contentContainerStyle：包裹内容的容器的样式

2）keyboardDismissMode：当键盘拉起时，滚动键盘是否消失 on-drag(消失)

3）keyboardShouldPersistTaps：当键盘拉起时，点击滚动区域键盘是否消失 never(消失)/always(不消失)/handled(消失)

！！！never和handled的区别：**键盘和Button同时存在的情况下：

never：点击按钮，键盘收起，但是Button的onPress没有直接执行

handled：点击按钮，键盘不会收起，Button的onPress直接执行，点击滚动区域的非按钮部分，键盘收起

4）overScrollMode：滚动到头，能否拉动 never(不能)/always(能)

5）scrollEnabled：是否可以滚动

6）contentOffset：初始默认滚动的位置 {y: 100}

7）showsVerticalScrollIndicator：滚动时，是否显示纵向滚动条

8）stickyHeaderIndices：第几个元素吸顶

9）指定滚动距离：ref.scrollTo({y: xxx})

10）指定滚动到结尾：ref.scrollToEnd()

<ScrollView
   ref={scrollViewRef}
   style={styles.root}
   contentContainerStyle={styles.containerStyle}
   keyboardDismissMode='on-drag'
   keyboardShouldPersistTaps='handled'
   onMomentumScrollBegin={() => {
       // console.log('滚动开始 ...')
   }}
   onMomentumScrollEnd={() => {
       // console.log('滚动结束 ...')
   }}
   onScroll={(event) => {
       // event.nativeEvent.contentOffset.y：滚动距离
       // console.log(event.nativeEvent.contentOffset.y);
   }}
   scrollEventThrottle={16} // ios, 没隔多少毫秒回调onScroll
   overScrollMode='always' 
   scrollEnabled={true}
   contentOffset={{ y: 100 }} // 初始滚动位置
   showsVerticalScrollIndicator={false}
   stickyHeaderIndices={[1]} // 第几个吸顶
>
   // 内容
</ScrollView>

11）pagingEnabled： 是否整页滚动

<ScrollView style={{ width: '100%', height: 200 }} horizontal={true} pagingEnabled={true}>
      <View style={{ width, height: 200, backgroundColor: 'red' }} />
      <View style={{ width, height: 200, backgroundColor: 'blue' }} />
      <View style={{ width, height: 200, backgroundColor: 'green' }} />
 </ScrollView>