如何在 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 的单击并显示单击项的详细信息。单击的项目将 id '发送'到这个类，所以我得到了特定的 detailView。

对不起，我的英语不好。

Answer 1

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

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

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

ps：我不确定是否完全理解您的要求，如果我的回答离题或有任何问题，您可以添加评论