React Native-如何通过使用地图数据渲染行？

Question

我该如何使用映射功能渲染行并使它像下面的图片一样

样本数据

  [
    {
      name: 'Alibaba Chuah',
      temp: '37',
      checkIn: true,
      checkOut: false,
    },

    {
      name: 'Calvin Lee',
      temp: '37',
      checkIn: true,
      checkOut: false,
    }
  ]

Answer 1

正在反应

let arr = [
      {
        name: 'Alibaba Chuah',
        temp: '37',
        checkIn: true,
        checkOut: false,
      },

      {
        name: 'Calvin Lee',
        temp: '37',
        checkIn: false,
        checkOut: false,
      }
    ]
    function App(){
      return (
        <div>
         {arr.map((item, index)=>
          <div key={index.toString()} 
          style={{display:'flex', 
          justifyContent:'space-between'}}>
          <span>{item.name}</span>
          <span>{item.temp}</span>
          <span style={{background:item.checkIn?'lightblue':''}}> 
          {item.checkIn?'CheckIn':'6:18 Am'}</span>
          </div>
          )}
        </div>
      );
     }

在React Native中

class App extends Component {
  render() {
    return (
     <View> 
      {arr.map(item=>
        <View style={styles.row}>
        <Text>{item.name}</Text>
        <Text>{item.temp}</Text>
        <Text 
        style={{background:item.checkIn?'lightblue':''}}>
        {item.checkIn?'CheckIn':'6:18 Am'}</Text>
      </View>
        )}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  row: {
    display:'flex',
    flexDirection: 'row',
    flex: 1,
    justifyContent: "space-between"
  }
});

Answer 2

本机提供 FlistList 组件。您可以轻松地使用它来将一系列对象呈现到移动视图中。 有关更多详细信息-React native flatlist