React Native: изображение при наведении курсора на Press

Привет, ребята, я не знаю, как создать наведение, если пользователь нажимает на изображение. Пожалуйста, помогите мне увидеть мой код ниже.

const { name } = this.props.category;
const { url } = this.props.category;

return (
  <TouchableWithoutFeedback onPress = {this.onRowPress.bind(this)}>
    <View>
      <CardSection>
          <View style = {styles.imageViewStyle}>
              <Text style = {styles.titleStyle}>{name}</Text>
          </View>
          <Image source = {{uri: url }} style = {styles.imageStyle}/>
      </CardSection>
    </View>
  </TouchableWithoutFeedback>
);

У меня есть список элементов с изображениями и именами в моей базе данных и я пытаюсь понять этот случай: если пользователь нажимает на изображение, покажет белое поле (наведение) с некоторой непрозрачностью и покажет 2 разные кнопки «Добавить новый Thred» и «Показать все Threds»

Спасибо

проверьте stackoverflow.com/questions/40081732/…

— 08.10.2018 08:41

android ios image react-native react-redux

08.10.2018 08:23

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

1 074

Ответы 1

Используйте React Native Modal для создания парящий белый ящик.

Узнайте, что представляет собой первый пример modal из нижеприведенного руководства.

https://www.tutorialspoint.com/react_native/react_native_modal.htm

На изображенииonPressделатьмодальный видимый

Примените styles надлежащим образом, чтобы он выглядел как диалоговое окно, который вы хотите, как вы упомянули в вопросе.

Используйте position absolute, который будет более подходящим, пример ниже.

   render() {
            return (
                <Modal
                    hardwareAccelerated
                    animationType = {'slide'}
                    supportedOrientations = {['portrait']}
                    visible = {this.state.isVisible}
                    onRequestClose = {() => {
                        this.props.onClosePress();
                    }}
                 >
                  <View
                    elevation = {5}
                    style = {styles.modalBackground}
                   >

                   </View>
                </Modal>
            );
        }


const styles = StyleSheet.create ({
   modalBackground: {
     backgroundColor: 'white',
     position: 'absolute',
     overflow: 'hidden',
     top: 50,
     right: 50,
     left: 50,
     bottom: 50
   }
})

Отрегулируйте margins в соответствии с вашими потребностями.

08.10.2018 08:53