如何在地图上显示标记从 React Native 上的 JSON 文件中获取数据

Question

我正在从这里获取一些数据：https://jsonplaceholder.typicode.com/users 结构如下：

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
  },
...
]

这是我的代码，我可以在其中获取这些数据并将它们显示在平面列表中

export default class Source extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: true,
            dataSource: []
        };
    }
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then((responseJson) => {
                this.setState({
                    loading: false,
                    dataSource: responseJson
                })
            })
            .catch(error => console.log(error)) //to catch the errors if any
    }

    renderItem = (data) =>
        <TouchableOpacity >
            <Text style={styles.lightText}>{data.item.name}</Text>
            <Text style={styles.lightText}>{data.item.address.geo.lng}</Text>
            <Text style={styles.lightText}>{data.item.address.geo.lat}</Text></TouchableOpacity>

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.dataSource}
                    ItemSeparatorComponent={this.FlatListItemSeparator}
                    renderItem={item => this.renderItem(item)}
                    keyExtractor={item => item.id.toString()}
                />
            </View>
        )
    }
}

如何使用这些纬度和经度数据在 MapView 中显示它们？此代码将显示 2 个标记，我需要根据该 json 文件显示标记

  <MapView style={styles.map}>
        <MapView.Marker
          coordinate={{
            latitude: 45.441831,
            longitude: 9.190771
          }}
        />
        <MapView.Marker
          coordinate={{
            latitude: 46.2222,
            longitude: 11.1231
          }}
        />
</MapView>

Answer 1

编辑 renderItem 函数：

renderItem = (data) => {
        return(
            <TouchableOpacity style={{flex:1}}>
                    <Text style={styles.lightText}>{data.item.name}</Text>
                    <MapView
                    style={{ height:300 }}
                    initialRegion={{
                        latitude: Number(data.item.address.geo.lat),
                        longitude: Number(data.item.address.geo.lng),
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}
                    >
                    <MapView.Marker
                        coordinate={{
                        latitude: Number(data.item.address.geo.lat),
                        longitude: Number(data.item.address.geo.lng),
                        }}
                    />
                </MapView>
            </TouchableOpacity>
        )
    }