React-native: pointerEvents = { 'none'}은 Androidμ—μ„œ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2019λ…„ 07μ›” 14일  Β·  2μ½”λ©˜νŠΈ  Β·  좜처: facebook/react-native

κ³€μΆ©

이미지 ꡬ성 μš”μ†Œμ— pointerEvents={'none'} 을 μ‚¬μš©ν•˜λ €κ³ ν•˜λŠ”λ° Androidμ—μ„œλŠ” μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. iOSμ—μ„œ νš¨κ³Όμ μž…λ‹ˆλ‹€.

React Native 버전 :

 React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
      Memory: 141.91 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.1.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 24, 26, 27, 28
        Build Tools: 26.0.2, 27.0.3, 28.0.2, 28.0.3
        System Images: android-24 | Google APIs Intel x86 Atom, android-27 | Intel x86 Atom_64, android-28 | Intel x86 Atom_64
    IDEs:
      Android Studio: 3.0 AI-171.4443003
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.9 => 0.59.9 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

μž¬ν˜„ 단계

export default class GeneralBackground extends PureComponent {

    render() {
        return (
            <View style={styles.container}>
                {this.props.children}
                <Image
                    source={myImage}
                    style={styles.image}
                    pointerEvents={'none'} // Does not work on Android.
                />
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.theme
    },
    image: {
        width: 160,
        resizeMode: 'stretch',
        alignSelf: 'center',
        position: 'absolute'
    }
});

this.props.children like Button ꡬ성 μš”μ†Œ λŠ” μž‘λ™ ν•  수 μžˆμ§€λ§Œ μœ„μ˜ μ΄λ―Έμ§€λŠ” μž‘λ™ν•˜μ§€ μ•Šμ„ κ²ƒμœΌλ‘œ μ˜ˆμƒν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ ν…ŒμŠ€νŠΈλ₯Ό 톡해 iOSμ—μ„œ μž‘λ™ ν•  수 μžˆμ§€λ§Œ AndroidλŠ” μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€. μ‹€μˆ˜λ‘œ μ‚¬μš© ν–ˆμŠ΅λ‹ˆκΉŒ? μ•„λ§ˆ 버그라고 μƒκ°ν•©λ‹ˆλ‹€.
μ•„λŠ” μ‚¬λžŒ μžˆλ‚˜μš”? λ§Žμ€ κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

Bug Android

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ•ˆλ…•ν•˜μ„Έμš” @ Amos729 ,

pointerEvents μ†Œν’ˆμ€ Image ꡬ성 μš”μ†Œμ—μ„œ μ‚¬μš©ν•  μˆ˜μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€ : https://facebook.github.io/react-native/docs/image μ—μ„œ pointerEvents ν•˜λ©΄ μ‚°μΆœ 됨 아무것도.

View ꡬ성 μš”μ†Œμ—λ§Œ μ‚¬μš©ν•  수 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€ : https://facebook.github.io/react-native/docs/view#pointerevents

그런 μ‹μœΌλ‘œ

<View style={styles2.image} pointerEvents={'none'}> 
   <Image source={myImage} />
</View>

Androidμ—μ„œ 어린이 Button 클릭 ν•  수 μžˆλ„λ‘ν–ˆμŠ΅λ‹ˆλ‹€.

도움이 λ˜μ—ˆκΈ°λ₯Ό λ°”λžλ‹ˆλ‹€.

λͺ¨λ“  2 λŒ“κΈ€

μ•ˆλ…•ν•˜μ„Έμš” @ Amos729 ,

pointerEvents μ†Œν’ˆμ€ Image ꡬ성 μš”μ†Œμ—μ„œ μ‚¬μš©ν•  μˆ˜μ—†λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€ : https://facebook.github.io/react-native/docs/image μ—μ„œ pointerEvents ν•˜λ©΄ μ‚°μΆœ 됨 아무것도.

View ꡬ성 μš”μ†Œμ—λ§Œ μ‚¬μš©ν•  수 μžˆλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€ : https://facebook.github.io/react-native/docs/view#pointerevents

그런 μ‹μœΌλ‘œ

<View style={styles2.image} pointerEvents={'none'}> 
   <Image source={myImage} />
</View>

Androidμ—μ„œ 어린이 Button 클릭 ν•  수 μžˆλ„λ‘ν–ˆμŠ΅λ‹ˆλ‹€.

도움이 λ˜μ—ˆκΈ°λ₯Ό λ°”λžλ‹ˆλ‹€.

@RobinCsl 방금 당신이 λ§ν•œ 것을 μ‹œλ„ν–ˆμŠ΅λ‹ˆλ‹€. Android 및 iOS ν”Œλž«νΌ λͺ¨λ‘μ—μ„œ 정말 μœ μš©ν•©λ‹ˆλ‹€.
정말 κ³ λ§™μŠ΅λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰