Блог

Я использую React Native с React Navigation v5, и все, что я хочу сделать, это добавить статическое фоновое изображение в мое приложение, которое не перезагружается при каждом новом экране. Я пробовал разные подходы с настройкой стиля, например

 cardStyle: { backgroundColor: 'transparent' }
  

но я не могу найти решение. Я пытался найти решения в Интернете, но поскольку V5 довольно новый, похоже, об этом не так много разговоров.

На данный момент это мой код, но все, что он делает, это добавляет изображение поверх стека, из-за чего все кнопки, которые я добавляю в Home, исчезают.

 const Stack = new createStackNavigator();

const App = () => {
  return (
    <ImageBackground
      style={styles.center}
      source={require('./img/pic.jpg')}
      resizeMode="stretch">
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            cardStyle: {backgroundColor: 'transparent'},
            headerShown: false,
          }}>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
          <Stack.Screen name="Screen3" component={Screen3} />
        </Stack.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
};

export default App;
  

и мой styles.js при необходимости:

 import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  center: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  }
});
export default styles;

  

Если бы кто-нибудь мог мне в этом помочь, я был бы очень признателен.

Для тех, кто использует react navigation v6, ответ заключается в использовании тем. На самом деле не знаю, есть ли они там и будут ли они работать так же в версии 5. Используя тот же предоставленный код, при импорте NavigationContainer также импортируйте с помощью DefaultTheme

 import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
  

Затем создайте тему, установив цвет фона на прозрачный следующим образом

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

Теперь добавьте созданную тему при использовании NavigationContainer

 {/* All that code including the BackgroundImage */}
<NavigationContainer theme={MyTheme}>
    {/* Your Stack navigator and it's Screens */}
</NavigationContainer>
  

Весь экран будет выглядеть примерно так

 // All other imports
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const Stack = new createStackNavigator();

const App = () => {

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

    return (
        <ImageBackground
            style={styles.center}
            source={require('./img/pic.jpg')}
            resizeMode="stretch">
            <NavigationContainer theme={MyTheme}>
                <Stack.Navigator screenOptions={{ headerShown: false }}>
                    <Stack.Screen name="Home" component={Home} />
                    <Stack.Screen name="Screen1" component={Screen1} />
                    <Stack.Screen name="Screen2" component={Screen2} />
                    <Stack.Screen name="Screen3" component={Screen3} />
                </Stack.Navigator>
            </NavigationContainer>
        </ImageBackground>
    );
};

export default App;
  

Вы можете добавить ImageBackground на каждый экран, который хотите, однако удалить эффект анимации перезагрузки, который вы могли бы установить fadeDuration={0} в ImageBackground компоненте.