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 = {
width: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>