Как выполнить рендеринг компонента без использования API-вызовов в React Native? - PullRequest
Новая
       20

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

1 голос
/ 28 марта 2019

enter image description here

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

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

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

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

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

1 Ответ

5 голосов
/ 28 марта 2019

Ваш 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>
  )
}
...