Как получить текст или кнопку для регистрации событий клика в верхней части карты Экспо? - PullRequest
Новая
       14

Как получить текст или кнопку для регистрации событий клика в верхней части карты Экспо?

0 голосов
/ 22 апреля 2019

Я пытаюсь сделать кликабельный текст или кнопку поверх моих карт Экспо.Мой провайдер - Google, и когда я пытаюсь отобразить текст, который можно кликнуть поверх моих карт, он не работает.Текст появляется, но не регистрирует события клика.Есть идеи?Вот некоторый код: (см. Внизу, я загружаю Return to home.) 

     <SafeAreaView style={{flex: 1, backgroundColor: HOMESCREEN_BACKGROUND}}>
      <View style={styles.container}>
        <StatusBar backgroundColor="blue" barStyle="light-content" />
        <View style={styles.topBar}>
            <Text style={styles.cityText}>
                {this.state.city}, {this.state.region}
            </Text>
            <Text style={styles.usernameText}>
              {this.props.user.uid}
            </Text>
        </View>
        <MapView 
            ref={this.map}
            style={styles.map}  provider="google" customMapStyle={NIGHT_MAP_STYLE}
            initialRegion={{
              latitude: this.props.reduxMap.latitude,
              longitude: this.props.reduxMap.longitude,
              latitudeDelta: this.props.reduxMap.latitudeDelta,
              longitudeDelta: this.props.reduxMap.longitudeDelta,
          }}
          showsScale={true}
          showsUserLocation={true}
          onChange={(event) => this.handleMapViewChange(event)}
        >             

          {/* {this.renderRelevantQueues()} */}
          <Text style={styles.returnToHome} onPress={this.snapMapViewToUser} >Return to home</Text>
        </MapView>
        <View style={styles.bottomBar}>
            <Text style={styles.backText} onPress={() => this.handleBackButtonClicked()}>
                Back
            </Text>
            {this.renderReturnToCurrentLocationSvg()}
        </View>
      </View>
    </SafeAreaView>

В ответ на некоторые вопросы по этому посту.

  1. Вы можете видеть текст, но не можете щелкнуть по нему?

    • Я могу видеть кнопку или текст или что-то еще в верхней части карты.Однако событие click не срабатывает, когда я физически нажимаю на элемент.

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

    • Это на самом деле закомментировано в моем коде, но визуализирует последовательность булавок и радиусов вокруг них на карте из базы данных.Удалена функция, и проблема все еще сохраняется.

  3. Можно ли добавить стили текущего экрана?Да, вот они: 

    const styles = StyleSheet.create({
   container: {
   flex: 1,
   backgroundColor: HOMESCREEN_BACKGROUND
},
topBar: {
  height: 200,
  backgroundColor: HOMESCREEN_BACKGROUND,
},
map: {
   flex: 1,
   flexDirection: 'column'
},
returnToHome: {
   color: 'white',
   position: 'absolute',
   fontSize: 30,
   marginLeft: '30%'
},
createQueue: {
  color: 'white',
  marginLeft: '50%',
  fontSize: 30
},
loadingTxt: {
  textAlign: 'center', 
  fontSize: 18,
  marginTop: "100%",
  marginLeft: "25%",
  width: 200
},
topBar: {
  height: '10%',
  backgroundColor: HOMESCREEN_BACKGROUND,
  justifyContent: 'center',
  alignItems: 'center',
  borderBottomColor: 'grey',
  borderBottomWidth: 1
},
bottomBar: {
  height: '10%',
  backgroundColor:  HOMESCREEN_BACKGROUND,
  flexDirection: 'row',
  borderTopColor: 'grey',
  borderTopWidth: 1,
},
backText: {
  color: 'white',
  fontSize: 30,
  marginLeft: 0
},
cityText: {
  color: 'white',
  fontSize: 30,
},
usernameText: {
 color: 'grey'
}
});
...