Question

我目前正在学习反应原生和反应原生地图（使用打字稿ES6），我有一些问题渲染标记，因为它们只是没有出现。我试图将我的逻辑分成对我有意义的组件，但我想知道这是否是我不能让它们渲染的原因。

我所拥有的是以下内容：

主要地图组件

<MapView style={styles.map}
         region={this.props.region}
         showsUserLocation={true}
         followsUserLocation={false}>
    <View>
        <SearchCircle />
        <MarkerList />
    <View>
 <MapView>

SearchCircle

SearchCircle工作正常，代码包含：

import { Circle } from 'react-native-maps';

...

class SearchCircle extends React.Component<SearchProps> {
    render() {
        return (
            <Circle center={this.props.user.location}
                    radius={this.props.map.searchRadius}
                    fillColor={'rgba(230,238,255,0.5)'}
                    strokeColor={'#1A66FF'}
                    strokeWidth={1} />
        );
    }
}

MarkerList - ISSUE

MarkerList是无法正确呈现的组件。它包含：

class MarkerList extends React.Component<MarkerListProps> {

    // render our contacts
    render() {
        return (
            <View>
                {this.props.markerlist[0] != undefined && this.props.markerList.map((marker, index) => (
                    this.renderMarker( marker, index )
                ))}
            </View>
        );
    }

    renderMarker( marker: MarkerEntry, index: number ) {
        return (
            <View key={index}>
                <Marker coordinate={marker.location} title={marker.title} />
                <Text>{'Lat: ' + marker.location.latitude + ', Long: ' + marker.location.longitude}</Text>
            </View>
        );
    }
}

当状态更新时（当我更新标记位置时），MarkerList组件会调用render（）但是只有 Text 元素才能正确呈现/更新。 Lat / Lng在我的屏幕上正确显示，但标记元素根本不显示。 MarkerList组件的 markerlist 属性是 MarkerEntry 类型的列表，其中包含以下内容：

interface MarkerEntry {
    title: string
    location: LatLng
}

无论我尝试什么，我都无法从这个数组中获取任何标记。如果我静态定义标记然后一切正常，但我的属性数组列表地图它们永远不会渲染。

有效的静态示例

class MarkerList extends React.Component<MarkerListProps> {

    // render our contacts
    render() {

        let marker = {
            id: 'Test',
            location: {
                latitude: -31.970097415447232,
                longitude: 115.92362245895334
            }
        };

        let markerArray: any[] = [];
        markerArray.push( marker );

        return (
            <View>
                {markerArray[0] != undefined && markerArray.map((c, index) => (
                    <Marker key={index} coordinate={c.location} title={c.id} />
                ))}
            </View>
        );
    }
}

是否有人能够提供帮助。我无法理解我做错了什么，或者我是否遗漏了一些关于反应原生应该的结构，以使其发挥作用。

提前致谢！

Answer 1

所以我设法解决了我的问题，并且认为我已经把我的最终解决方案留给了其他需要它的人。问题在于我如何定义 MapView ，以及我如何返回地图结果。

地图组件

对于主地图组件，我必须删除子视图＆lt; View＆gt;我定义的条目。

<强>之前

<MapView style={styles.map}
         region={this.props.region}
         showsUserLocation={true}
         followsUserLocation={false}>
    <View>**
        <SearchCircle />
        <MarkerList />
    <View>
 <MapView>

<强>后

<MapView style={styles.map}
         region={this.props.region}
         showsUserLocation={true}
         followsUserLocation={false}>
    <SearchCircle />
    <MarkerList />
 <MapView>

<强> MarkerList

我必须改变的第二部分是渲染函数及其在渲染函数中的语法。

<强>之前

class MarkerList extends React.Component<MarkerListProps> {
    // render our contacts
    render() {
        return (
            <View>
                {this.props.markerlist[0] != undefined && this.props.markerList.map((marker, index) => (
                    this.renderMarker( marker, index )
                ))}
            </View>
        );
    }

    renderMarker( marker: MarkerEntry, index: number ) {
        return (
            <View key={index}>
                <Marker coordinate={marker.location} title={marker.title} />
                <Text>{'Lat: ' + marker.location.latitude + ', Long: ' + marker.location.longitude}</Text>
            </View>
        );
    }
}

<强>后

请注意地图调用之外和之内的其他返回语句以及＆lt; View＆gt;的删除元件。

class MarkerList extends React.Component<MarkerListProps> {
    // render our contacts
    render() {
        return this.props.markerList.map((marker, index) => {
            return( this.renderMarker( marker, index ));
        });
    }

    renderMarker( marker: MarkerEntry index: number)  {
        return (
            <View key={index}>
                <Marker coordinate={marker.location} title={marker.title} />
            </View>
        );
    }
}

子组件

1 个答案: