RN学习笔记2019.10.21

常用组件属性备份记录，方便后期进一步学习总结，包括FlatList的属性、ImageBackground背景图片填充、Image的显示样式、Text设置居中、View标签设置边框属性

一、FlatList属性

注意添加区头区尾布局使用ListHeaderComponent、ListFooterComponent

                <FlatList
                    style={styles.container}
                    data={this.state.dataSource}
                    //item显示的布局
                    renderItem={({item}) => this._createListItem(item)}
                    // 空布局
                    ListEmptyComponent={this._createEmptyView}
                    //添加头尾布局
                    ListHeaderComponent={this._createListHeader}
                    // ListFooterComponent={this._createListFooter}
                    ListFooterComponent={this._createListFooter.bind(this)}
                    //下拉刷新相关
                    //onRefresh={() => this._onRefresh()}
                    refreshControl={
                        <RefreshControl
                            title={'Loading'}
                            colors={['red']}
                            refreshing={this.state.isRefresh}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                    refreshing={this.state.isRefresh}
                    //加载更多
                    onEndReached={() => this._onLoadMore()}
                    onEndReachedThreshold={0.1}
                    ItemSeparatorComponent={this._separator}
                    keyExtractor={this._extraUniqueKey}
                />

    /**
     * 分割线
     */
    _separator() {
        return <View style={{height: 1, backgroundColor: '#999999'}}/>;
    }

二、填充背景图ImageBackground

       <ImageBackground
          style={styles.container}
          source={require("../../../images/qrt_head_bg.png")}
        >
        </ImageBackground>

三、Image显示样式：resizeMode

resizeMode 的五个取值分别是：contain、cover、stretch、center 和 repeat。
如果没有定义 resizeMode，默认值为：cover

cover 模式（默认值）
该模式要求图片能够填充整个 Image 组件定义的显示区域，可以对图片进行放大或者缩小，可以丢弃放大或缩小后的图片中的部分区域，只求在显示比例不失真的情况下填充整个显示区域
contain 模式
该模式要求显示整张图片，可以对它进行等比放大或者缩小，但不能丢弃改变后图片的某部分
stretch 模式
该模式要求图片填充整个 Image 定义的显示区域，因此会对图片进行任意的缩放，不考虑保持图片原来的宽、高比。这种模式显示出来的图片有可能会出现明显的失真
center 模式
该模式要求图片图片位于显示区域的中心。这种模式下图片可能也无法填充 Image 的所有区域，会在侧边或者上下留下空白，由 Image 组件的底色填充
repeat 模式（iOS 独有）
该模式的图片处理思路是用一张或者多张图片来填充整个 Image 定义的显示区域

四、Text组件居中

实现Text组件居中，一般在Text组件外包裹一层View组件，设置View水平轴和交叉轴居中，只需对Text设置字体和颜色即可。

flexDirection: "row" 设置水平轴为主轴
justifyContent: "center"水平轴元素的对齐方式
alignItems: "center"交叉轴元素的对齐方式

          <View
            style={{
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              backgroundColor: "blue",
              width: 72,
              height: 32
            }}
          >
            <Text style={{ fontSize: 12, color: "#f2f2f2" }}>文字文字</Text>
          </View>

五、View设置边框属性

width：宽度

height：高度

backgroundColor：背景颜色

backfaceVisibility：是否显示翻转'visible'，'hidden'

borderColor：边框颜色

borderWidth：边框宽度

borderRadius：边框圆角半径

borderStyle：边框样式'solid'实线，'dotted'点， 'dashed'虚线

borderTopColor：上边框颜色

borderTopWidth：上边框宽度

borderTopLeftRadius：左上角边框圆角的半径

borderTopRightRadius：右上角边框圆角的半径

overflow：内容超过容器时超出显示还是隐藏'visible'， 'hidden'

opacity：透明度

最后编辑于：2019.10.21 10:48:47