Question

我声明了一个常量，该常量具有从另一个页面传递的参数。

const obj = this.props.navigation.state.params.item;
const itemArray = Object.values(obj.name)

现在，我在Flatlist数据中调用itemArray，请参见下文。

这是我的单位列表：

 <FlatList
      key={this.keyExtractor}
      data={itemArray}
      renderItem={({item}) => this.renderText(item)}
    />

问题在于它不显示文本。它只是空白。

这是我在Flatlist中调用的render方法：

renderText = (itt) => {

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt.name}
        />
      </View>
    )
  }

Answer 1

您应该可以使用FlatList。

这是我如何在组件的render方法中实现它。

请注意，您不需要在this变量的前面使用obj。
此外，您在item函数中拼写了renderItem错误，如果不纠正，可能会导致问题。
要使此特定代码正常工作，您传递的对象应该是字符串数组，例如['first', 'second', 'third']
此外，您还应该在组件内部将函数定义为keyExtractor。

keyExtractor = (item, index) => {
  return index.toString();
}

render () {
  const obj = this.props.navigation.state.params.item;
  return (
   <FlatList
     key={this.keyExtractor}
     data={obj}
     renderItem={({ item }) => <Text>{item}</Text>}
   />
  );
}

Answer 2

由于FlatList不接受对象，因此您必须采取解决方法。您还必须创建一个数组并将对象推入那里。

const obj = this.props.navigation.state.params.item;
    var propsArray = [];
    const itemArray = Object.assign(obj)
    propsArray.push(itemArray)

    return (
      <View>
        <FlatList
          key={this.keyExtractor}
          data={propsArray}
          renderItem={({ item }) => this.renderText(item)}
        />
      </View>
}

和您的渲染方法应保持不变：

renderText = (itt) => {

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt.name}
        />
      </View>
    )
  }

Answer 3

您可以直接使用

<FlatList
      key={this.keyExtractor}
      data={this.props.navigation.state.params.item}
      renderItem={({ iteemm }) => <Text>{iteemm}</Text>}
/>

Answer 4

尝试

renderText = (itt) => {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt}
        />
      </View>
    )
  }

我可以在Flatlist数据中调用props.navigation吗？

4 个答案: