React Native Flatlist 以 props 作为数据

Question

正在尝试创建两列不同样式的数据。第一列是数据标签，第二列作为道具从另一个屏幕传入，该屏幕是从 API 检索到的。我决定使用两个平面列表。我能够成功呈现数据标签，但似乎无法访问在第二个 Flatlist 中作为道具传入的数据。我已经尝试将“props”、“props.route”作为 Flatlist 的数据源，但似乎没有任何效果。如有任何反馈，我们将不胜感激。

这是我正在寻找的输出。
sample output

到目前为止，这是我的代码。

const labels = [
  "Height:",
  "Gender:",
  "Mass:",
  "Hair Color:",
  "Eye Color:",
  "Birth Year:",
];

function PeopleDetails(props) {
  const { name, height, gender, mass, hair_color, eye_color, birth_year } =
    props.route.params;

  return (
    <View>
      
      <DetailsInfo
        height={height}
        gender={gender}
        mass={mass}
        hair_color={hair_color}
        eye_color={eye_color}
        birth_year={birth_year}
      />
    </View>
  );
}

const LabelView = ({ label }) => (
  <View>
    <AppText style={styles.labelStyle}>{label}</AppText>
  </View>
);

const LabelDataView = ({ labelData }) => (
  <View>
    <AppText style={styles.labelDataStyle}> {labelData} </AppText>
  </View>
);

const DetailsInfo = (props) => (
  <View style={{ flex: 1, flexDirection: "row" }}>
    <FlatList
      style={{ flexDirection: "column" }}
      data={labels}
      renderItem={({ item }) => <LabelView label={item} />}
      keyExtractor={(item) => item}
      numColumns={1}
    />
    <FlatList
      style={{ flexDirection: "column" }}
      data={props}
      renderItem={({ item }) => <LabelDataView labelData={item} />}
      keyExtractor={(item) => item}
      numColumns={1}
    />
  </View>
);

const styles = StyleSheet.create({
  labelStyle: {
    paddingTop: 5,
    marginLeft: 25,
  },

  labelDataStyle: {
    paddingTop: 5,
    color: "gold",
    textTransform: "uppercase",
    textAlign: "left",
  },
});

Answer 1

这个技巧可以帮助

const labels = [...];

function PeopleDetails(props) {
  const { name, height, .... } = props.route.params;

  // create new array here
  const valueSet = [
    {value: name},
    {value: height}, 
    {value: gender}, 
    {value: mass}, 
    {value: hair_color}, 
    {value: eye_color}, 
    {value: birth_year}, 
  ];

  return (
    .....
      <DetailsInfo valueSet={valueSet} /> // replace props with above array
    ....
  );
}

....................................
// item component same as it is
....................................

const DetailsInfo = (props) => (
  .........
    <FlatList
      ....
      data={props.valueSet} // update here
      renderItem={({ item }) => <LabelDataView labelData={item.value} />} // update here
      ....
    />
  ........
);

React Native Flatlist 以 props 作为数据

React Native Flatlist with props as data

react-native

react-navigation

react-native-flatlist