0

我希望我的应用程序看起来像这样： 它应该是什么样子

这是我的 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",

这个问题对我来说非常重要，但有关代码的任何其他提示将不胜感激。

要了解问题，您需要查看链接中的图像。我保证的链接没有错。我真的需要一些关于背景图像的帮助。

4

0 回答 0