基本上由两部分构成:grid(flex view)和listview。
使用的元素来自原生基础。
我也用过<View>
,但问题还是一样。
View style={{flex: 1, flexDirection: 'row'}}>
代码片段是:
<Grid>
<Col style={{ backgroundColor: '#635DB7', height: 80 }}>
<Text style={styles.head}>致電</Text>
</Col>
<Col style={{ backgroundColor: '#00CE9F', height: 80 }}>
<Text style={styles.head}>地圖</Text>
</Col>
<Col style={{ backgroundColor: '#635DB7', height: 80 }}>
<Text style={styles.head}>分享</Text>
</Col>
</Grid>
<List>
{ list.map((item, i) => (
<ListItem icon key={i} noBorder>
<Left style={styles.left}>
{ item.icon &&
<Icon type={item.type} name={item.icon} style={styles.icon} />
}
</Left>
<Body>
<Text style={{ color: item.color}}>{item.title ? item.title : "N/A"}</Text>
</Body>
</ListItem>
))
}
</List>