Css 如何以表格的形式在屏幕上设置json数据的样式？

我有一个显示我的数据的屏幕。我想以表格的形式显示（屏幕底部的数据），如屏幕截图所示

编辑：顶部零件代码：

电影里面也有

<View>
<Text key={item.symbol}>{item.symbol}<Text>
<Text key={item.open}>{item.open}<Text>
<Text key={item.close}>{item.close}<Text>

</View>

{item.symbol}
{item.open}
{item.close}

现在我的屏幕看起来像：

我想创建一个如下所示的界面：

close、high等旁边的数据是我从api获取的一些json数据

我现在的代码是：

let movie = ( 
  <View  style={styles.bottomdata}>
   <Text style={styles.text} key={item.name}>
      {item.name}
    </Text>
     <Text style={styles.text} key={item.open}>
      OPEN {item.open}
    </Text>
     <Text style={styles.text} key={item.close}>
      CLOSE{item.close}
    </Text>
   <Text style={styles.text} key={item.volumes}>
      VOLUME{item.volumes}
    </Text>
     <Text style={styles.text} key={item.low}>
     LOW {item.low}
    </Text>

    <Text style={styles.text} key={item.high}>
      HIGH{item.high}
    </Text>  
  </View>
)


  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
       <View>{movie}</View>   
      </View>
    </TouchableWithoutFeedback>

   );
}



const styles = StyleSheet.create({
  text: {
    color: "black",
    backgroundColor: "white",
  },
  bottomdata:
  {
      marginTop:400,
      backgroundColor:"black",
  }
});

let movie=（
{item.name}
打开{item.OPEN}
关闭{item.CLOSE}
卷{item.volumes}
低{item.LOW}
高{item.HIGH}
)
返回(
{电影}
);
}
const styles=StyleSheet.create({
正文：{
颜色：“黑色”，
背景颜色：“白色”，
},
底部数据：
{
玛金托普：400，
背景颜色：“黑色”，
}
});

---

电影

是屏幕上显示的数据。我该如何设计它呢？在顶部，它只是符号名称（与底部相同）和闭合值和高值。我怎样才能设计出那样的屏幕？我能够获取数据，但不确定如何设计它。

您只需要使用一些对齐和全部进行div，然后在相关字段中获取这些数据。

您必须使用视图和测试来布局内容，这将创建类似于表的内容。下面的代码显示了如何在一行中定位项目

JSX

---

它可以工作，但是我如何在屏幕截图中添加行以及它的名称呢？另外，我如何在顶部添加json数据呢？就像在屏幕截图中显示的symbol、close、open数据以及红色和绿色背景一样，您必须在rowItem样式中添加borderWidth:1、borderColor:“白色”现在可以看到吗？我发布的链接？我的意思是，你的问题只有底部代码

  <View style={{ flex: 1 }}>
  <View
    style={{
      flexDirection: 'row',
      backgroundColor: 'black',
      alignItems: 'center',
    }}>
    <Text style={{ flex: 0.5, color: 'white' }}>{item.symbol}</Text>
    <Text style={{ flex: 0.5, color: 'white' }} key={item.open}>{item.open}</Text>
    <Text
      style={{
        flex: 0.5,
        color: 'white',
        backgroundColor: 'red',
        marginVertical: 5,
        paddingHorizontal: 10,
        borderRadius: 10,
      }}
      key={item.close}>
      {item.close}
    </Text>
  </View>

  <View style={styles.bottomdata}>
    <Text style={[styles.text, { alignSelf: 'center' }]} key={item.name}>
      {item.name}
    </Text>
    <View style={styles.row}>
      <View style={styles.rowItem}>
        <Text style={styles.text}>OPEN</Text>
        <Text style={styles.text}>{item.open} </Text>
      </View>
      <View style={styles.rowItem}>
        <Text style={styles.text}>CLOSE</Text>
        <Text style={styles.text}>{item.close}</Text>
      </View>
    </View>
    <View style={styles.row}>
      <View style={styles.rowItem}>
        <Text style={styles.text}>LOW</Text>
        <Text style={styles.text}>{item.low} </Text>
      </View>
      <View style={styles.rowItem}>
        <Text style={styles.text}>HIGH</Text>
        <Text style={styles.text}>{item.high}</Text>
      </View>
    </View>
    <View style={styles.rowItem}>
      <Text style={styles.text}>VOLUME</Text>
      <Text style={styles.text}>{item.volumes}</Text>
    </View>
  </View>
</View>

const styles = StyleSheet.create({
  text: {
    color: 'white',
  },
  bottomdata: {
    marginTop: 'auto',
    backgroundColor: 'black',
  },
  row: {
    flexDirection: 'row',
    width: '100%',
  },
  rowItem: {
    width: '50%',
    justifyContent: 'space-between',
    flexDirection: 'row',
    paddingHorizontal: 5,
  },
});