我有这个设计,我试图在 React Native 中制作,但无法使用 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;
输出
我认为我的方法有问题。如果有人指出来,那就太好了。谢谢。
最佳答案
移除widgets样式中的width: '44%'
,替换为flex: 1
。此外,而不是小部件之间的边距。
row: {
flex: 1,
flexDirection: 'row',
height:120,
marginTop: 15,
marginBottom: 15,
},
widgets: {
backgroundColor: '#fff',
elevation: 2,
flex: 1,
marginLeft: 15,
marginRight: 15
}
在您的 Expo 应用程序中有一种 Expo 小吃:https://snack.expo.io/@vijayst/widgets
关于css - 在 React Native 中使用 Flexbox 有困难,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48594446/