RN九宫格
九宫格可以用两种方式来做,一种使用SectionList,是我的另外一篇博客,还有一种的纯代码计算,下面是效果图
代码如下:
var Dimensions = require('Dimensions'); var {width, height} = Dimensions.get("window");//屏幕的宽和高 var itemWidth = 100;//item宽度 var itemHeight = 100;//item高度 var cols = 3;//列数 var marginLeft = (width-itemWidth*cols)*1.0/(cols+1);//左侧距离 export default class MyApp extends Component { static defaultProps = { count: 5 } getAllText(){ var texts = []; for(var i=0;i<5;i++){ texts.push( <View key={i} style={styles.textStyle}> <Text >123</Text> </View> ) } return texts; } render() { return ( <View style={styles.wrapper}> {this. getAllText()} </View> ) } } const styles = StyleSheet.create({ wrapper: { flexDirection:'row', // 换行显示 flexWrap:'wrap', paddingTop: 40 }, textStyle: { width: itemWidth, height: itemHeight, backgroundColor: "#ff0000", alignItems: 'center', justifyContent: 'center', marginLeft: marginLeft, marginTop: 5 } });