Question

嗨，伙计们，我不知道如何在用户按下图像时创建悬停。请帮助我在下面查看我的代码。

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个不同的按钮“添加新阈值”和“显示所有阈值”

谢谢你

Answer 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。

React Native：将图片悬停在Press上

1 个答案: