在 React Native 中创建简单的网格布局答案

【问题标题】：Creating Simple Grid Layout in React Native在 React Native 中创建简单的网格布局
【发布时间】：2021-01-11 03:37:08
【问题描述】：

我正在尝试在我的 React Native 应用程序中创建以下布局，但未能正确完成。电话号码、地址和日程目前位于屏幕中间，“互动部分”位于屏幕底部。

我在这里做错了什么？我很感激这个布局的一些帮助。谢谢！

顺便说一句，在下图中，我放置了边框以向您展示我想要实现的目标。我实际上不想看到联系信息、日程安排或互动部分的任何边界。整个东西应该漂浮在白色背景上。

这是我的组件中的代码：

<View style={styles.container}>
   <View style={styles.title}>
      <Text style={styles.titleText}>Global Enterprises</Text>
   </View>
   <View style={styles.contactInfoSection}>
      <View style={styles.phoneNumberSection}>
         <View>
            <Text>212.555.1234</Text>
         </View>
         <View>
            <Text>1 Global Way</Text>
            <Text>New York, NY 12345</Text>
         </View>
      </View>
      <View style={styles.scheduleSection}>
         <Text>Mon - Fri 8:30 - 5:30</Text>
         <Text>Sat - Sun Closed</Text>
      </View>
   </View>
   <View>
       <Text style={styles.interactSection}>Other stuff</Text>
   </View>
</View>

这是我在这个特定屏幕上的样式表：

const styles = StyleSheet.create(
   {
      contactInfoSection: {
         alignContent: 'flex-start',
         alignItems: 'flex-start',
         alignSelf: 'flex-start',
         flex: 2,
         flexDirection: 'row',
         marginTop: 20
      },
      container: {
         alignContent: 'flex-start',
         flex: 1,
         flexGrow: 1,
         padding: 20
      },
      interactSection: {
         flex: 3
      },
      locationSection: {
         alignItems: 'center',
         flex: 1
      },
      phoneNumberSection: {
         alignContent: 'center',
         alignItems: 'center',
         alignSelf: 'center',
         flex: 1
      },
      scheduleSection: {
         alignContent: 'center',
         alignItems: 'center',
         alignSelf: 'center',
         flex: 1
      },
      title: {
         alignItems: 'center',
         flex: 1,
         marginTop: 5
      },
      titleText: {
         fontSize: 17,
         fontWeight: 'bold'
      }
   }
);

export { styles };

【问题讨论】：

你的问题不清楚

标签： react-native flexbox

【解决方案1】：

您需要更新contactInfoSection 和title 样式。请修改

这个

  contactInfoSection: {
    alignContent: 'flex-start',
    alignItems: 'flex-start',
    alignSelf: 'flex-start',
    flex: 2,
    flexDirection: 'row',
    marginTop: 20,
  },
  title: {
    alignItems: 'center',
    flex: 1,
    marginTop: 5,
  },

到这里

contactInfoSection: {
    flexDirection: 'row',
    marginTop: 20,
  },
  title: {
    alignItems: 'center',
    marginTop: 5,
  },

祝你好运

【讨论】：

谢谢。我肯定工作。我只需要了解为什么会这样。我以为我通过添加 flex 属性来分配标题和联系信息部分将在屏幕上占据多少空间。
当我们不设置 flex 时，该元素将尝试占用其子元素所需的空间。因此，在您的情况下，我们从contactinfo 和title 部分中删除了flex，这使得contactinfo 适合他们的孩子需要的空间。如果你想给他们一些额外的空间，那么 padding 或 margin 比 flex 更合适。
再次感谢您的解释。我真的很感激。