时间戳

首页 > 解决方案 > React Native UI 无法正确呈现

javascript - React Native UI 无法正确呈现

问题描述

我正在映射一个数组。在表中。我只使用视图和文本创建表格。但现在有很多价值。那么那个用户界面没有正确显示。如图所示在此处输入图像描述

这是我的表格代码

<ScrollView horizontal={true}>
<View style={{ flexDirection: "column", width: width / 3.1 }}>
<View
  style={{
    height: 50,
    justifyContent: "center",
    backgroundColor: "#C0C3C3",
    elevation: 5,
    marginTop: "2%",
  }}
>
  <Text style={{ alignSelf: "center" }}>Date</Text>
</View>
{mediDataP.map((item, i) => (
                    <View
                      key={i}
                      style={{
                        height: 50,
                        justifyContent: "center",
                        backgroundColor: "#EEF1F1",
                        elevation: 5,
                        marginTop: "2%",
                      }}
                    >
                      <Text style={{ alignSelf: "center" }}>{item.date}</Text>
                    </View>
                  ))}
                </View>





                <View style={{ flexDirection: "column", width: width / 3.9 }}>
                  <View
                    style={{
                      height: 50,
                      justifyContent: "center",
                      backgroundColor: "#C0C3C3",
                      elevation: 5,
                      marginTop: "2%",
                    }}
                  >
                    <Text style={{ alignSelf: "center" }}>Time</Text>
                  </View>

                  {mediDataP.map((item, i) => (
                    <View
                      key={i}
                      style={{
                     
                        height: 50,
                        justifyContent: "center",
                        backgroundColor: "#EEF1F1",
                        elevation: 5,
                        marginTop: "2%",
                      }}
                    >
                      <Text style={{ alignSelf: "center" }}>{item.time}</Text>
                    </View>
                  ))}
                </View>

                </ScrollView>

请忽略它=我正在映射一个数组。在表中。我只是使用视图和文本的表。但现在有很多价值。那么那个用户界面没有正确显示。我正在映射一个数组。在表中。我只是使用视图和文本的表。但现在有很多价值。那么那个用户界面没有正确显示。我正在映射一个数组。在表中。我只是使用视图和文本的表。但现在有很多价值。那么那个用户界面没有正确显示。我正在映射一个数组。在表中。我只是使用视图和文本的表。但现在有很多价值。那么那个用户界面没有正确显示。我正在映射一个数组。在表中。我只是使用视图和文本的表。但现在有很多价值。那么那个用户界面没有正确显示。

标签： javascriptreact-nativeuser-interface

解决方案

我真的不知道背后的真正行为是什么，但我只是发现在使用 marginTop 的 % 值时，它会根据您的组件宽度产生影响，例如具有您的 item.time 的组件；如果增加宽度的大小，“2%”的大小也会增加。

推荐阅读