我有这个设计,我试图在本机反应中进行,但无法使用 flexbox 正确安排。
期望的结果
我的代码
import React from 'react';
import { View, Text, StyleSheet } from 'react-native'
import Touchable from 'react-native-platform-touchable';
class Dashboard extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<View style={styles.container}>
<View style={styles.row}>
<Touchable style={styles.widgets}>
<View><Text> Hello Dashboard </Text></View>
</Touchable>
<Touchable style={styles.widgets}>
<View><Text> Hello Dashboard </Text></View>
</Touchable>
</View>
<View style={styles.row}>
<Touchable style={styles.widgets}>
<View><Text> Hello Dashboard </Text></View>
</Touchable>
<Touchable style={styles.widgets}>
<View><Text> Hello Dashboard </Text></View>
</Touchable>
</View>
<View style={styles.row}>
<Touchable style={styles.widgets}>
<View><Text> Hello Dashboard </Text></View>
</Touchable>
<Touchable style={styles.widgets}>
<View><Text> Hello Dashboard </Text></View>
</Touchable>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start'
},
row: {
flex: 1,
flexDirection: 'row',
height:120,
marginTop: 15,
marginBottom: 15,
},
widgets: {
backgroundColor: '#fff',
elevation: 2,
width: '44%',
marginLeft: 15,
marginRight: 15
}
})
export default Dashboard;
输出
我认为我的方法有问题。如果有人指出,那就太好了。谢谢。