android - react native : Hover image onPress

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创建悬停白框。

从下面的教程中了解什么是模态第一个示例

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

在图像上 onPress 使 模态可见

以正确的方式应用样式，使其看起来像您在问题中提到的那样的对话框。

使用更合适的绝对位置，如下例。

   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
   }
})

根据您的需要调整边距。