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

Question

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

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

使用Map组件中的Asynchronous变量，我会让Map知道隐藏Marker。但问题是如何重新渲染我的Map组件？

更新的问题

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

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组件中执行以下操作。您不需要修改状态，只需使用传入的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>
  )
}