Reactjs 如何在单击时更改视图区域，而不在React Native中设置状态

我有一个这样的应用程序：

目前，它是与世博会和地图视图一起建造的。单击地址时，该地址将使用此animateToRegion功能设置为pin的动画：

<MapView>
....
</MapView>
<ScrollView style={ styles.mapStyle }>
    {waypoint.map((item, i) => {
        return (
            <View key={i}>
                <View style={styles.houseList}>
                    <TouchableOpacity
                        style={styles.addressButtons}
                        onPress = {() => this.mapView.animateToRegion({
                            latitude: item.latitude,
                            longitude: item.longitude
                        }, 1000)}>
                        <Text>{item.address}</Text>
                     </TouchableOpacity>
                 </View>
               </View>
          );
     })}
</ScrollView>

....
{航路点地图（（项目，i）=>{
返回(
this.mapView.animateToRegion({
纬度：item.latitude，
经度：item.longitude
}, 1000)}>
{item.address}
);
})}

我想做的是保留这个动画，但也要更改“ScrollView”组件中显示的内容。

---

我尝试了

{ifImTrue&&现在我想到了两个选项：

调用
setState（）
后运行动画：
在
中重写项目组件。基本上，您希望项目自行重新呈现（如前所述刷新）。要实现此目的，您可以尝试以下步骤：


将项目的值存储在变量中，而不是处于
状态
，这样您就可以在不重新呈现
父组件的情况下进行更新

重写项目类中的
shouldComponentUpdate（）
。您可以在此链接中阅读更多内容：。例如，您可以仅通过尝试此操作重新呈现项目的组件（假设您的
数据将通过
this.props.data
）：


之后，当您在
Parent
组件中更改项目的值时，项目组件将使用收到的新数据检查其当前数据，如果它们不同，则重新渲染

注
在重写此方法之前，您最好仔细阅读我上面提到的链接。原因是：

使用
shouldComponentUpdate（）
让React知道组件的输出是否不受当前状态或道具更改的影响。默认行为是在每次状态更改时重新渲染，在大多数情况下，您应该依赖默认行为

当接收到新的道具或状态时，将在渲染之前调用
shouldComponentUpdate（）
。默认值为true。初始渲染或使用
forceUpdate（）
时不调用此方法

简而言之，当您的
状态
和
道具
更改时，当您从外部更新
道具
或从内部调用
setState（）
时，将调用此函数。由于我的示例仅检查
nextProps
，因此
nextState
将被忽略，这将使您的
setState（）
项目组件中的功能将意外运行（仍在运行，但由于没有重新渲染，视觉效果没有变化）
可能尝试从航路点阵列中添加所选项目（指定唯一id以标识每个对象）在状态中，并在地图中执行
selectedWayPoint==='some value'？：
？只需在单击时设置状态并使用useEffect为该区域设置动画是否有效？
this.setState({
    yourContent: yourValue
}, () => {
    // Your animation called here
})

shouldComponentUpdate(nextProps) {
    return this.props.data !=== nextProps.data;
}