rn中所需要用到的组件

一、阴影

　　yarn add  react-native-shadow

　　yarn add  react-native-svg

　　react-native link react-native-svg

import {BoxShadow} from 'react-native-shadow'
render() {

const shadowOpt = {
315, //包裹的子内容多宽这里必须多宽
height:44,//同上
color:"#000",//阴影颜色
border:4,//阴影宽度
radius:22,//包裹的子元素圆角多少这里必须是多少
opacity:0.1,//透明度
x:0,
y:0,
style:{marginVertical:5}
}
}

<BoxShadow setting={shadowOpt}>
<View style={[styles.userInput, styles.userName]}>
<Text></Text>
</View>

原文链接：https://blog.csdn.net/qq_34645412/article/details/82689191

二、FlatList

　　这是一个便利数据进行渲染，

　　这个组件呢如果使用状态管理的话，只能获取第一次到的值，如果值的状态发生改变是无法监听到的，

　　因此，这个组件呢只能获取到state里面的数据，通过在组件中声明一个属性来监听state里面的变化；extraData={this.state}

　　也支持scrollView中的removeClippedSubviews 优化手段，不过有莫名bug

　　下面是render里面的写法

<View style={styles.big}>
                <View style={styles.scrolsty}>
                    <FlatList
                        //<
                        onRefresh={() => this._onRefresh()}
                        refreshing={this.state.isRefresh}
                        //>下拉刷新

                        ListHeaderComponent={this._createListHeader}
                        ListFooterComponent={this._createListFooter}
                        //创建头尾布局
                        ListEmptyComponent={this._createEmptyView}
                        //空布局
                        onEndReachedThreshold={0.1}
                        data={goods}
                        onEndReached={this.handlescroll.bind(this)}
                        keyExtractor={(item)=>item.text}　　　　　　//key值
                        renderItem={({item})=><View><Text>{item.text}</Text></View>}　　//item就是便利的数据结构，不过需要通过解构赋值来获取
           　　　　　　　　getItemLayout={(data, index) => ({
    　　　　　　　　　　　　　　length: 20,
    　　　　　　　　　　　　　　offset: 20 * index,
    　　　　　　　　　　　　　　index,
　　　　　　　　　　　　　　　})}
                    />
                </View>
            </View>

链接: https://blog.csdn.net/sinat_17775997/article/details/81030754

三、ScrollView

const data = Array.from(new Array(10000))
    .map((_val, i) => ({
        icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
        text: `Name${i}`,
    }));

<ScrollView
    removeClippedSubviews // 用于优化滑动列表（子元素需要设置overflow："hidden"）
    alwaysBounceVertical
>
    {
        data.map((item, index) => (
            <Text
                key={item.text}
                style={{ overflow: 'hidden' }}
            >
                {item.text}
            </Text>
        ))
    }
</ScrollView>