使用 props 作为数据的 React Native Flatlist

Posted 2023-02-16

【中文标题】使用 props 作为数据的 React Native Flatlist

【英文标题】：React Native Flatlist with props as data

【发布时间】：2022-01-12 06:45:06

【问题描述】：

尝试创建具有不同样式的两列数据。第一列是数据标签，第二列作为道具从另一个屏幕传入，该屏幕是从 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",
  ,
);

【参考方案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
      ....
    />
  ........
);

【讨论】：

成功了。谢谢

@mac4code 如果有帮助，请接受答案。谢谢:-)