Saya baru-baru ini memulai proyek perguruan tinggi pada aplikasi reaksi asli, dan saya telah menerapkan navigasi bereaksi, tetapi masalahnya adalah, komponen utama secara harfiah hanya berkedip untuk milidetik dan hanya menghilang ketika saya mencoba menjalankan aplikasi. Ini kodenya:

import { StyleSheet, Text, View } from 'react-native';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import WelcomeScreen from './screens/WelcomeScreen';
import { NavigationContainer, StackActions } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const Stack = createStackNavigator()

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Welcome">
          <Stack.Screen name="Welcome" component = {WelcomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
      <View style = {styles.credit}>
        <Text style = {styles.creditText}>Developed by Nabih Amer & Ashraf Kherbawy.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#373546',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center'
  },
  credit: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  creditText: {
    fontSize: 10,
    color: '#9f99b6',
    paddingBottom: 4,
  },
});

Komponen WelcomeScreen secara harfiah hanya berkedip untuk kedua di aplikasi web dan menghilang, saya juga check in di aplikasi Expo dan itu melakukan hal yang sama.

0
Zzz Zzz 4 April 2021, 16:03

2 jawaban

Jawaban Terbaik

Konsep Stack Navigator adalah untuk ditampilkan dan dinavigasi di antara layar yang berbeda. Jadi jangan berpasangan dengan elemen tampilan. Coba memiliki tampilan yang berbeda sebagai layar dan gunakan sebagai stack. Layar

0
Gogul-S 5 April 2021, 15:30

Sepertinya Anda menggunakan tampilan ekstra di navigasiContainer dan tumpukannya

Seharusnya seperti ini:

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Welcome">
          <Stack.Screen name="Welcome" component = {WelcomeScreen} />
          <Stack.Screen name="Login" component = {LoginScreen} />
          <Stack.Screen name="Register" component = {RegisterScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}
0
bilarslan 5 April 2021, 12:40