為什么使用 ImageBackground 時按鈕無法點擊？

Question

我為我的 React Native 應用程序實現了 ImageBackground，當我運行模擬器時，它不允許按下按鈕。 按鈕事先經過測試，正常執行 function。 我覺得這與組件的訂購有關，但在重新訂購時沒有成功。

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

Styles：

export const globalStyles = StyleSheet.create({

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

Answer 1

這是ImageBackground中Button的工作示例。

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;

不要直接設置你的 styles。 首先，檢查此示例並在此基礎上重新設計。

另外，我建議你使用React Navigation Helpers來避免navigation鑽取。 我是這篇文章的作者，它適用於 React Navigation v4、v5 和 v6。