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

Question

我为我的 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
    },
``

Answer 1

这是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。