列表未在RN中呈现

Question

我想知道是否有人可以帮助我看看这个代码。我正在构建一个简单的个人资料页面，其中列出了他们的社交媒体句柄。当我点击角色名称进入其个人资料时，它会中断。我收到的错误如下：元素类型无效，预期为字符串或类/函数。它还告诉我要检查render方法。

有人可以帮我或至少指向正确的方向吗？

谢谢。

render() {
    const list = {
      FB: "HomerFB",
      ID: "HomerIG",
      TWT: "HomerTwitter"
    };
       return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Image
          style={{ width: 200, height: 200 }}
          source={{
            uri:
              "https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2011/08/23/23827615-simpson_homer_headshot.jpg?v=1314140241"
          }}
        />
        <Text style={[styles.homer_text]}>Name: Homer Simpson</Text>
        <Text>Hometown: Springfield</Text>
        <Text>Occupation: Nuclear Safety Inspector</Text>
        <Text>Social Media Handles</Text>
 {Object.keys(list).map(i => {
      console.log(list[i]);

    return( <ListItem key={i}>{list[i]}</ListItem>)
        })}
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate("Home")}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />{" "}
        */}
      </View>
    );
  }
};
const styles = StyleSheet.create({
  homer_text: {
    fontSize: 30
  },
  item: {
    fontSize: 30,
    padding: 10,
    height: 20,
    color: "green"
  }
});
export default HomerSimpson;