React Native: наведите курсор на изображение - PullRequest
Новая
       6

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

0 голосов
/ 08 октября 2018

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

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 разных кнопки «Добавить новый Тред» и «Показать все Треды»

thank u

1 Ответ

0 голосов
/ 08 октября 2018

Используйте 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 в соответствиидля ваших нужд.

...