在 React Native 中使用 Flexbox 有困难

Question

我尝试在 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;

输出

我认为我的方法有问题。如果有人指出来，那就太好了。谢谢

Answer 1

删除小部件样式中的 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

在 React Native 中使用 Flexbox 有困难

Having difficulty in using flexbox in react native

css

flexbox

react-native

react-native-flexbox

想要的结果

我的代码

输出