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

Question

如果item.id与json中的ID相同，如何仅在FlatList中呈现项目？

我是本机和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：我不确定您是否完全了解您的要求，如果我的回答不合主题或您有任何疑问，可以添加评论