React Native：悬停图片onPress

Posted 2021-03-27

嗨，大家好，如果用户按下图像，我不知道如何创建悬停。请帮我看看下面的代码。

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 “

感谢你

答案

使用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。