如何在 React Native 中设置全屏背景图片？

Question

我希望我的应用看起来像这样：

这是我的 App.js:

import * as React from 'react';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { ImageBackground } from 'react-native';

const Stack = createNativeStackNavigator();

const stackOptions = {
  headerTitleStyle: {
    fontSize: 40,
    fontWeight: 'bold',
    color: 'black',
    letterSpacing: 2,
  },
   cardStyle: { backgroundColor: 'transparent', shadowColor: 'transparent' },
   transparentCard: true,
   transitionConfig: () => ({
     containerStyle: {
       backgroundColor: 'transparent',
     },
  }),
};

const options = {
  header: () => null,
  cardStyle: {
    backgroundColor: 'transparent',
  },
};

const App = () => {
  return (
    <ImageBackground
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
      source={require('./src/hardCodingDb/bg-img.png')}
      resizeMode="cover">
      <NavigationContainer>
        <Stack.Navigator styleOptions={options}>
          <Stack.Screen name={menu.title} component={HomeScreen} options={stackOptions} />
          <Stack.Screen name={menu.schedule} component={Schedule} options={stackOptions} />
          <Stack.Screen name={menu.stats} component={Stats} options={stackOptions} />
          <Stack.Screen name={menu.news} component={News} options={stackOptions} />
          <Stack.Screen name={menu.loginRegister} component={LoginRegister} options={stackOptions} />
        </Stack.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
};

export default App;

这是我的 HomeScreen.js

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { TextButton } from './consts/Buttons';
import { menu } from './consts/Strings';

export const HomeScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.options}>
        <TextButton style={styles} text={menu.schedule} dir={menu.schedule} navigation={navigation} />
        <TextButton style={styles} text={menu.news} dir={menu.news} navigation={navigation} />
        <TextButton style={styles} text={menu.stats} dir={menu.stats} navigation={navigation} />
        <TextButton style={styles} text={menu.loginRegister} dir={menu.loginRegister} navigation={navigation} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  options: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  optionButton: {
    fontSize: 35,
    padding: 40,
  },
});

输出为：

ImageBackground 覆盖了所有组件。如果我注释掉 alignItems，这里是输出：

如果我将宽度设置为 200，则会发生以下情况：

    <ImageBackground
      style={{
        flex: 1,
        justifyContent: 'center',
        width: 200,
        // alignItems: 'center',
      }}
      source={require('./src/hardCodingDb/bg-img.png')}
      resizeMode="cover">

版本：

"react-navigation": "2.2.0",
"@react-navigation/native": "^6.0.4",
"@react-navigation/native-stack": "^6.2.2",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.8.0",

Answer 1

这是正确的答案，这救了我：https://www.youtube.com/watch?v=mR2SkagbIXg&list=WL&index=226

现在我的 App.js 看起来像这样

const Stack = createNativeStackNavigator();

const stackOptions = {
  headerTransparent: true,
};

const Theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'transparent',
  },
};

const App = () => {
  return (
      <NavigationContainer theme={Theme}>
        <Stack.Navigator screenOptions={stackOptions}>
          // .. screens
        </Stack.Navigator>
      </NavigationContainer>
  );
};

HomeScreen.js:

  import Containter from './Container';

  export const HomeScreen = ({ navigation }) => {
    return (
      <Containter>
        // content
      </Containter>
    );
  };

这里非常重要的是 Container 组件。他是施展所有魔法的人。最终，我使用了 LinearGradient，但 Image 或 BackgroudImage 也有效；）

Container.js:

import LinearGradient from 'react-native-linear-gradient';

const Containter = ({ children }) => {
  return (
    <LinearGradient start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} colors={['#1C0C5B', '#3D2C8D']} style={styles.image}>
      <StatusBar barStyle="light-content" />
      <SafeAreaView style={styles.container}>{children}</SafeAreaView>
    </LinearGradient>
  );
};

如何在 React Native 中设置全屏背景图片？

How can I set full screen background image in React Native?

react-native

navigation

stack

imagebackground