javascript - 反应原生没有出现在屏幕上

Question

我有来自 firebase 的数据。我循环遍历这些值并尝试将它们放在 a 的Listitem内部，scrollview但由于某种原因，列表项只是没有显示出来。我知道数据正确通过，因为我正在控制台记录它。（您可以从下面的代码示例中看到）

有谁知道如何解决这个问题或可能导致它的原因？

整体渲染：

  render() {
    const {search} = this.state;

    return (
      <ImageBackground
        source={images.BackgroundImage}
        style={styles.mainContainer}>
        <CustomHeader navigation={this.props.navigation} />
        <SearchBar
          placeholder="Type Here..."
          onChangeText={this.updateSearch}
          value={search}
        />
        <ScrollView>
          {this.state.dataArr.map((value, i) => {
            if (typeof value.name === 'string') {
              console.log(value.name);
              <ListItem
                style={styles.listItem}
                key={i}
                title={value.name}
                subtitle={value.role}
                bottomDivider
              />;
            }
          })}
        </ScrollView>
      </ImageBackground>
    );
  }
}

款式：

const styles = StyleSheet.create({
  mainContainer: {
    position: 'absolute',
    flex: 1,
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    overflow: 'hidden',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
    backgroundColor: 'blue',
  },
  listItem: {
    width: '100%',
    height: '20%',
    backgroundColor: 'red',
    padding: 0,
  }
});

Console.log() 结果：我们有一堆 Jeffs 作为测试，所以没错。

LOG  Tom Nook
 LOG  jeff
 LOG  jeff
 LOG  jeff
 LOG  jeff
 LOG  jeff

标签： javascriptreact-native

Answer 1

我认为您需要返回 ListItem，否则它不会返回任何视图

{this.state.dataArr.map((value, i) => {
            if (typeof value.name === 'string') {
              console.log(value.name);
              return(
                <ListItem
                  style={styles.listItem}
                  key={i}
                  title={value.name}
                  subtitle={value.role}
                  bottomDivider
                />;
                )
            }
          })}