reactjs - 如何根据是否选择动态更新 MapMarker 图像集合？

Question

我最近对此感到困惑，我希望根据 map 标记是否被选择/事件来动态更新 map 标记图像(每个 map 标记都有一个类别，其中引用事件图像或来自两个图像集合的默认图像；interestIcons 和interestIconsSelected。本质上，我有一个 MapMarkers 集合，它们通过 map 标记集合进行映射而呈现。每个 MapMarker 都是 MapView.Marker 的子组件。

我想以默认的非选定/非事件状态渲染所有 MapMarker，这些 MapMarker 具有来自interestIcons的默认图像，当选择时，该MapMarker图像应该从interestIconsSelected更改为事件图像，当选择另一个MapMarker时先前选择的图像应恢复为默认图像，新的图像应更改为所选图像。

目前，我可以使用默认图像渲染 map 标记，但是当选择 map 标记时，图像似乎不会立即更改，除非您再次缩小/放大，即导致某种重新调整-render，我希望这样单击 MapMarker 会立即导致图像更新。

MapScreen.js:通过 map 渲染出所有 MapView.Marker MapMarkers 的 MapView。

        <MapView
            ref={map => { this._map = map }}
            style={Styles.Map.map}
            initialRegion={this.props.region}
            onRegionChange={this.handleRegionChange}
        >
            {
                this.props.events
                    .filter(this.eventFilterTimeNearFuture)
                    .filter(this.eventFilterTimeNotPast)
                    .filter(this.eventFilterDistance)
                    .filter(this.eventFilterInterest)
                    .map(e =>
                        <MapView.Marker
                            key={e.id}
                            onPress={() => this.handleLocationPush(e)} // Set selected event state
                            coordinate={e.location}
                        >
                            <MapMarker
                                event={e}
                                size={this.state.markerSize}
                                selected={this.state.selectedEvent} // The selected event set by state call.
                            />
                        </MapView.Marker>
                    )
            }
            { !this.props.regionMock &&
                <MapView.Marker
                    key={'userLocation'}
                    coordinate={this.props.region}
                >
                    <MapMarker size={'user'} />
                </MapView.Marker>
            }
        </MapView>

MapMarker.js

import {interestIcons, interestColors, interestIconsSelected} from "../../utils/Icons";

import {Styles} from '../../StyleProvider';

class MapMarker extends React.Component {

constructor() {
    super();
    this.state = {
        initialized: false,
        active: false,
    };
};    

componentWillReceiveProps(nextProps) {
    if (!this.state.initialized) {
        console.log('initialization');            
        this.setState({initialized: true});
    }
    else {
        // If the nextProps.selected prop exists which it will
        if (nextProps.selected) {
            // If the nextProps.selected props id equals the this event id then selected else non-selected.
            if (nextProps.selected.id === nextProps.event.id) {
                console.log('SELECTED: ' + JSON.stringify(nextProps.selected));
                // set staae to active
                this.setState({
                    active: true
                });
                console.log(interestIconsSelected[nextProps.event.interest[0]]);
            } else {
                // set state to not active
                // console.log('NON-SELECTED: ' + JSON.stringify(nextProps.event));   
                this.setState({
                    active: false
                });                
            }
            this.forceUpdate();
        }
    }
}

 markerIcon(interest) {
    return this.state.active ? interestIconsSelected[interest] : interestIcons[interest];
 }

renderIcon() {
    if (this.props.event.type === 'Event') {
        return (
            <Image
                source={this.markerIcon(this.props.event.interest[0])}
                style={Styles.MapMarker.eventImage}
            />
        )
    }
}

componentWillReceiveProps(nextProps) 仍在进行中，它表明当前选定的事件和所有未选定的事件“足够好”。

我尝试将图像源设置为使用 this.state.image ，然后分别在 componentWillReceiveProps 中设置图像状态，即

if (nextProps.selected) {
    // If the nextProps.selected props id equals the this event id then selected else non-selected.
    if (nextProps.selected.id === nextProps.event.id) {
        console.log('SELECTED: ' + JSON.stringify(nextProps.selected));
        // set staae to active
        this.setState({
            active: true,
            image: this.markerIcon(nextProps.event.interest[0], true)
        });
        console.log(interestIconsSelected[nextProps.event.interest[0]]);
    } else {
        // set state to not active
        console.log('NON-SELECTED: ' + JSON.stringify(nextProps.event));   
        this.setState({
            active: false,
            image: this.markerIcon(nextProps.event.interest[0], false)
        });                
    }
}

renderIcon() {
    if (this.props.event.type === 'Event') {
        return (
            <Image
                source={this.state.image}
                style={Styles.MapMarker.eventImage}
            />
        )
    }
}

更改图像状态似乎确实更有效，因为图像会立即更改，但似乎根本不会设置初始渲染上的图像，因此在选择之前它只是一个空图标。

非常感谢，感谢任何帮助。

更新:尝试在 MapView.Marker 下定义 Image 组件，但这不起作用。

this.state.markers
.map(e =>
    <MapView.Marker
        key={e.id}
        onPress={() => this.handleLocationPush(e)}
        coordinate={e.location}
    >
        {/* <MapMarker
            event={e}
            size={this.state.markerSize}
        /> */}
        <Image
            source={this.state.selectedEvent === e ? interestIconsSelected[e.interest[0]] : interestIcons[e.interest[0]]}
            style={Styles.MapMarker.eventImage}
        />
    </MapView.Marker>
)

但这可行，尽管您似乎无法将样式应用于 MapView.Marker 但这不是我想要的实现，因为我想保留自定义 MapMarker 组件

this.state.markers
.map(e =>
    <MapView.Marker
        key={e.id}
        onPress={() => this.handleLocationPush(e)}
        coordinate={e.location}
        image={this.state.selectedEvent === e ? interestIconsSelected[e.interest[0]] : interestIcons[e.interest[0]]}
    />
)

以上两个代码片段，无论是直接在 MapView.Marker 上使用 image 属性，还是直接在 MapView.Marker 下使用 Image 组件，都不如使用 MapMaper 子组件好。

Answer 1

您使用componentWillReceiveProps生命周期方法，它在第一次渲染时没有运行，您还使用this.state.initialized，并且在构造函数中为false状态，因此这将使您需要单击两次才能使其激活

componentWillReceiveProps(nextProps) { // it did not run at first render
  if (!this.state.initialized) { // this.state.initialized with is false in constructor
    console.log('initialization');            
    this.setState({initialized: true});
  }
  .......
}

如果你这样做，你可以完全删除你的componentWillReceiveProps

markerIcon() { //did not get interest directly instead access it from props
  return this.props.selected.id === this.props.event.id ?
   interestIconsSelected[this.props.event.interest[0]] 
   : 
   interestIcons[this.props.event.interest[0]];
}

在这里，您比较两个具有相同比较的对象，因为它们很深，您可以使用类似这样的东西来代替 babel 混淆 see more

<Image
  // use this.state.selectedEvent.id  === e.id instead of this.state.selectedEvent  === e
  source={this.state.selectedEvent.id  === e.id  ? interestIconsSelected[e.interest[0]] : interestIcons[e.interest[0]]}
  style={Styles.MapMarker.eventImage}
 />

希望对您有帮助，谢谢