如何在React-Native

时间:2018-12-12 16:23:41

标签: react-native ecmascript-6 react-native-android react-native-flatlist

如果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。

对不起,我的英语不好。

1 个答案:

答案 0 :(得分:1)

如果您想在点击列表项时导航到详细信息页面,则应使用导航库(react-navigation是最受欢迎的)。

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

(在本示例中,我使用的是react-navigation 2,而最后一个版本是react-navigation 3,因此如果要在本地复制它,也要使用它)

ps:我不确定您是否完全了解您的要求,如果我的回答与主题无关或有任何疑问,您可以添加评论