我如何在 React Native android 中制作一个包含相机可点击的 TouchableOpacity？

Question

我正在 react-native TouchableOpacity 中渲染相机视图，如何让它可点击？

相同版本的代码在 iOS 上运行良好，touchableOpacity 可点击并产生正确的输出

<TouchableOpacity style={{width:'100%', height:300}} onPress={() =>alert("hey")}>
    <Camera 
        style={{ height: 300, width: '100%', display: this.state.camera }}  
        type={this.state.type} 
        autoFocus={'on'} 
        ratio={'4:3'}   
        focusDepth={0} 
        ref={(ref) => { this.camera = ref }}>
    </Camera>
</TouchableOpacity>

我希望当我按下 TouchableOpacity 时输出是一个带有 "hey" 的警报，而不是我在 android 上什么也得不到，但我在 iOs 上收到 "hey"

Answer 1

那是因为 iOs 和 Android 之间的 TouchableOpacity 行为不同。一个快速的修复方法是将 Android 中的 TouchableOpacity 替换为 TouchableWithoutFeedback。这是一种方法：

const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableWithoutFeedback });

然后只需使用此常量来包装您的相机视图。

PS：确保从 react-native 模块中导入了 TouchableOpacity、TouchableWithoutFeedback 和 Platform。

我如何在 React Native android 中制作一个包含相机可点击的 TouchableOpacity？

How do i make a TouchableOpacity wraping a camera clickable on React Native android?

reactjs

react-native

touchableopacity