为什么使用ImageBackground时按钮无法单击？

如何解决为什么使用ImageBackground时按钮无法单击？

我为我的React Native应用实现了ImageBackground，当我运行模拟器时，它不允许按下按钮。这些按钮已经过预先测试，并且可以正常工作。 我觉得这与组件的排序有关，但是在重新排序时却没有成功。

export function TitleScreen({navigation: navigation}) {
    return (
        <ImageBackground source={require('../assets/space_background_reduced_v1.png')} style={globalStyles.background}>
            <Image source = {require('../assets/logo.png')} style={globalStyles.logo}/>
            <View style={globalStyles.Buttons}>

                <Button title={"Random Race"} onPress={() => navigation.navigate('RandomRaceOptionsScreen')}/>
                <Button title={"Create"} onPress={() => navigation.navigate('CreateMenu')}/>
                <Button title={"Race Lore"} onPress={() => navigation.navigate('RaceLoreListScreen')}/>


            </View>

        </ImageBackground>
    );
}

样式：

export const globalStyles = StyleSheet.create({

    Buttons: {
        zIndex:5,width: 120,marginLeft: "33%",marginTop:90
    },``

解决方法

这是Button中ImageBackground的有效示例。

import React from 'react';
import {View,Image,Button,StatusBar,ImageBackground} from 'react-native';

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <ImageBackground
        source={require('./assets/ahmed-yaaniu-05A3CzImkhw-unsplash.jpg')}
        style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}>
        <Image
          source={require('./assets/apple-logo.png')}
          style={{height: 50,width: 50}}
        />
        <View
          style={{
            width: 120,marginTop: 90,}}>
          <Button title={'Random Race'} onPress={() => {}} />
          <Button title={'Create'} onPress={() => {}} />
          <Button title={'Race Lore'} onPress={() => {}} />
        </View>
      </ImageBackground>
    </>
  );
};

export default App;

请勿直接设置样式。首先，检查此示例，然后在此示例上重新设计。

此外，我建议您使用React Navigation Helpers来避免进行navigation钻探。我是它的作者，它在React Navigation v4和v5中都可以使用。