如何在 React-Native 中获取 Flatlist 的特定项目

Question

如果 item.id 与 json 中的 id 相同，我如何才能只在 FlatList 中呈现项目？

我是 react-native 的新手，JavaScript 所以这可能是个愚蠢的问题。

到目前为止我的代码：

export default class DetailsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
  }

  componentDidMount() {
    this.setState({
      isLoading: false,
      dataSource: data.data
    });
  }

render() {
    if (this.state.isLoading) {
      return (
        <View>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View>
        <FlatList
          data={this.state.dataSource}
          renderItem={({ item }) => (this.renderDetailView(item))}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

这就是 Flatlist 的简单渲染，效果非常好。 'renderDetailView' 非常复杂和冗长，所以我无法添加代码。

但它看起来像这样：

renderDetailView(item) {
    return (
      <View style={styles.info} key={item.id}>
        <View>
          <Text style={styles.detailView}>
            {item.name}
          </Text>
          <Text>{'\n'}</Text>
        </View>
         ...
      </View>
    );
  }

在最终项目中，我想处理对另一个 FlatList 的点击并显示被点击项目的详细信息。单击的项目 'send' 此项目的 ID class 所以我得到了特定的 detailView。

抱歉我的英语不好。

Answer 1

如果您想在点击列表中的项目时导航到详细信息页面，您应该使用导航库（react-navigation 是最受欢迎的）。

我创建了一个基本的工作示例： https://snack.expo.io/@sanjar/so-53747271

（在这个例子中我使用了react-navigation 2，而最后一个版本是react-navigation 3，所以如果你想在本地复制它也可以使用这个）

ps : 我不确定是否完全理解你的要求，如果我的回答跑题了或者你有任何问题，你可以添加评论

如何在 React-Native 中获取 Flatlist 的特定项目

How to get a specific item of a Flatlist in React-Native

ecmascript-6

react-native

react-native-android

react-native-flatlist

到目前为止我的代码：