如何在不使用 React Native 中的任何 API 调用的情况下重新渲染组件？

Question

从上图中，我有 2 个视图，当按下棕色或绿色按钮时可以更改它们。因此，当默认情况下已经选择了棕色按钮时，地图中有一个标记。当我按下绿色按钮时，我希望删除地图的标记。

所以我尝试的是在按下绿色按钮时设置一个异步变量，并在 Map 组件中获取该异步变量。

使用地图组件中的异步变量，我会让地图知道隐藏标记。但问题是如何重新渲染我的地图组件？

更新问题

Dan 的解决方案对我有用。但现在我有一个小问题。当我在componentWillMount 中使用this.setState 时，它会给我一个警告。那么我可以使用什么其他替代方法来根据我收到的道具的价值来显示/隐藏我的标记？

if(this.props.isMarkerVisible) {
        this.setState({ showDots: true })
    }
    else {
        this.setState({ showDots: false })
    }

         { this.state.showDots === true &&
                <Marker
                    ref={(mark) => { this.marker = mark; }}
                    coordinate={{ latitude, longitude }}
                    pinColor={colors.primaryColor}
                    image={require('../../../../assets/circle.png')}
                />
            }  

            { this.state.showDots === false &&  null }    

Answer 1

您的Map 组件将在其道具和状态更改时重新渲染

给你的父组件添加一个状态变量

this.state = {
  isMarkerVisible: false // Set this to your default value
}

现在，添加一个设置状态变量的函数

onPress = isMarkerVisible => {
  this.setState({ 
    isMarkerVisible
  });
}

最后，修改按钮上的 onPress 事件

// Green
<TouchableOpacity
  onPress={() => this.onPress(false)}
/>

// Brown
<TouchableOpacity
  onPress={() => this.onPress(true)}
/>

修改您的Map 组件，使其接受isMarkerVisible 属性，其值为this.state.isMarkerVisible

<Map
  ...props
  isMarkerVisible={this.state.isMarkerVisible}
/>

现在在你的Map 组件内部，你需要修改渲染逻辑，下面是一些伪代码。您尚未添加任何 Map 代码，因此我无法提供具体信息。

If this.props.isMarkerVisible
Then render the marker
Else do not render the marker

更新以反映问题

您可以在 Map 组件中执行以下操作。不需要修改 state，使用传入的 prop 即可。

renderMarker = (coordinates) => {
  const { isMarkerVisible } = this.props;
  if(!isMarkerVisible) return null;
  return (
    <Marker
      ref={(mark) => { this.marker = mark; }}
      coordinate={{ latitude, longitude }}
      pinColor={colors.primaryColor}
      image={require('../../../../assets/circle.png')}
    />
  )
}


render() {
  const coordinates = { latitude: 0, longitude: 0 }
  return (
    <View>
      { this.renderMarker(coordinates) }
    </View>
  )
}