时间戳

首页 > 解决方案 > 在 React Native 中创建简单的网格布局

react-native - 在 React Native 中创建简单的网格布局

问题描述

我正在尝试在我的 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-nativeflexbox

解决方案

您需要更新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,
  },

祝你好运

推荐阅读