Как повторно отобразить компонент без использования вызова API в React Native?

На моем изображении выше у меня есть 2 вида, которые можно изменить, нажав коричневую или зеленую кнопку. Поэтому, когда коричневая кнопка уже выбрана по умолчанию, на карте есть маркер. И когда я нажимаю зеленую кнопку, я хочу, чтобы маркер карты был удален.

Итак, я попытался установить асинхронную переменную при нажатии зеленой кнопки и получить эту асинхронную переменную в компоненте карты.

И с помощью этой асинхронной переменной в компоненте карты я сообщу карте, чтобы скрыть маркер. Но проблема в том, как я могу повторно отобразить свой компонент карты?

Обновленный вопрос

Решение Дэна сработало для меня. Но теперь у меня есть небольшая проблема в нем. Когда я использую 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 }

android reactjs react-native react-native-maps

28.03.2019 08:58

Коллекции (ArrayList , HashSet , HashMap)

465

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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. Вам не нужно изменять состояние, просто используйте передаваемую опору.

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>
  )
}

Обновлено @ShubhamBisht

— 28.03.2019 12:31

к сожалению, по какой-то причине я не могу использовать функцию renderMarker вне рендера. Кажется, это какая-то проблема с координатами. Нет ли другого способа использовать setState внутри componentWillMount? Может быть, с помощью this._isMounted ?

— 28.03.2019 12:42

Можете ли вы поделиться своим методом рендеринга в вопросе?

— 28.03.2019 12:54

Ответ обновлен, чтобы функция renderMarker принимала координаты

— 28.03.2019 13:12

28.03.2019 09:30