React Native列表未填充值

Question

我目前正在用本机构建一个列表，但是不幸的是它没有填充任何值。 有4个列表元素，它们与数组中的数字一致。 但是项目在界面中只是空的。

  render() { console.log(this.state.friends); /*logs [ Array [ Object { "avatar_url": Alice url, "id": 1, "name": "alice", "selected": false, }, Object { "avatar_url": Bob url, "id": 2, "name": "Bob", "selected": false, }, Object { "avatar_url": Charlie url, "id": 3, "name": "Charlie", "selected": false, }, Object { "avatar_url": Dave url, "id": 4, "name": "Dave", "selected": false, }, ]]*/ return ( <View style={styles.container}> <Content> <ScrollView> <List containerStyle={{marginBottom: 20}}> { this.state.friends.map((l, i) => { return(<ListItem roundAvatar avatar={{uri: l.avatar_url}} key={i} onPress={() => {this.clickedFriend(l)}} title={l.name} rightIcon={<Icon style={{alignSelf: 'center'}} size={25} name={l.selected ? "check-circle-o" : "times-circle-o"}/>} />) }) } {/* <ListItem onPress={() => {this.inviteFriends()}} title="Invite Friends" /> */} </List> </ScrollView> <View style={styles.container2}> <View style={styles.buttonContainer}> <Icon.Button name="arrow-right" backgroundColor="#3b5998" onPress={()=>this.send()}> <Text style={{color: "white"}}>Send</Text> </Icon.Button> </View> </View> </Content> </View> ); } 

Answer 1

我猜是因为map函数没有返回任何东西。 映射确实映射了4个项目，因此映射了listView项目，但未返回任何内容。 在map函数中，尝试将您的内容放入return（/ ListItem here /）中，如下所示。

{
            this.state.friends.map((l, i) => (
              return(<ListItem
                roundAvatar
                avatar={{uri: l.avatar_url}}
                key={i}
                onPress={() => {this.clickedFriend(l)}}
                title={l.name}
                rightIcon={<Icon style={{alignSelf: 'center'}} size={25} name={l.selected ? "check-circle-o" : "times-circle-o"}/>}
              />)
            ))
          }