reactjs React本机导航堆栈不工作

iq0todco  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(178)

我有关于React Native导航的问题。x一切似乎运行良好。我没有看到任何问题终端。我还删除了这段代码

<Stack.Navigator>
      <Stack.Screen name="Login" component={LoginScreen} />
  </Stack.Navigator>

然后我加上这段代码

<Text>test message</Text>

我的程序工作正常。you can see
但是我添加了堆栈导航代码,看到了空白页。can you see this picture
我怎样才能解决这个问题?
App.js中的完整代码

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View} from 'react-native';
import Navigation from './views/navigation';
import ErrorScreen from './views/ErrorScreen/ErrorScreen';

export default function App() {
  return (
    <View style={styles.container}>
      <Stack.Navigator>
          <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

LoginScreen.js的完整代码

import { View, Text, Image, StyleSheet, useWindowDimensions, KeyboardAvoidingView} from 'react-native';
import React, {useState} from 'react'
import Logo from '../../assets/fdslogo.png';
import CustomInput from '../components/CustomInput/CustomInput';
import CustomButton from '../components/CustomButton/CustomButton';
import { useNavigation } from "@react-navigation/native";

const LoginScreen = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const {height} = useWindowDimensions();

  return (
    <KeyboardAvoidingView behavior='padding'>
    <View style={styles.root}>
     <Image 
        source={Logo}
        resizeMode="contain"
        style={styles.logo}
         />

<CustomInput placeholder="E-Posta Adresinizi Giriniz"
        value={email}
        setValue={setEmail}/> 
      <CustomInput placeholder="Şifrenizi Giriniz"
        value={password}
        setValue={setPassword}
        secureTextEntry/>

    <CustomButton  text="Giriş Yap" />
    </View>
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  root: {
      alignItems: 'center',
      paddingTop: 0,
  },

  logo: {
     
      maxWidth: 300,
      maxHeight: 200,
  },

});

export default LoginScreen;
odopli94

odopli941#

我也有同样的问题。
我所做的是删除视图(同时删除样式表的样式),这样就成功了

相关问题