Modal透明 prop 设置为true时,每当Stack.Navigator在React Native中更改屏幕时,我的应用就会在iOS上崩溃

5q4ezhmt  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(121)

我在Expo中发现了这个问题,每当Stack.Navigator(@react-navigation/native-stack)更改屏幕时,从一个包含透明属性设置为true的Modal的屏幕,应用程序在iOS上崩溃(而不是在Android上)。
代码:

// Login.tsx file 

 <Modal transparent={true} visible={modalVisible} animationType='slide'>
                <View style={[styles.container, {justifyContent: "flex-end"}]}>
                    <View style={[styles.container, {flex: 0.8}]}> 
                        <TextInput onChangeText={(text) => setEmail(text)} value={email} autoCapitalize='none' style={styles.input} placeholder='email' placeholderTextColor={"#898989"}></TextInput>
                        <TextInput onChangeText={(text) => setPassword(text)} value={password} autoCapitalize='none' style={styles.input} placeholder='password' secureTextEntry placeholderTextColor={"#898989"}></TextInput>
                        {loading ? <ActivityIndicator size="large" color="#c59e69"/> : 
                        <>
                        <Button color="#c59e69" title="login" onPress={signIn}/>
                        <Button color="#c59e69" title="create account" onPress={signUp}/>
                        <Button color="#121212" title="Guest" onPress={guestAccess}/>
                        </>}
                    </View>
                </View> 
                <Button title="Remove Modal" onPress={() => setModalVisible(false)}/>
   </Modal>

字符串
signIn和guestAccess函数分别会导致firebase函数signInWithEmailAndPassword和signInAntively。这会更改Auth状态,然后更改App.tsx上的用户状态变量,该变量用于标识用户应该在哪个堆栈屏幕上:

// App.tsx

const Stack = createNativeStackNavigator()

export default function App() {

  const [user, setUser] = useState<User | null>(null)

  const auth = AUTH

  useEffect(() => {
    onAuthStateChanged(AUTH, (user) => setUser(user)) 
  
   
  }, [])
  

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Login'>
        { user ? <Stack.Screen name='Inside' component={InsideLayout} options={{ headerShown: false,}}/> : <Stack.Screen name="Login" component={Login} options={{ headerShown: false}} />}
      </Stack.Navigator>
    </NavigationContainer>
  );
}
// This is my package.json

{
  "name": "cottage",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~49.0.15",
    "expo-av": "~13.4.1",
    "expo-firebase-recaptcha": "^2.3.1",
    "expo-font": "~11.4.0",
    "expo-status-bar": "~1.6.0",
    "firebase": "^10.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-responder": "^0.1.1",
    "react-native-modal": "^13.0.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6",
    "expo-build-properties": "~0.8.3",
    "expo-apple-authentication": "~6.1.0",
    "expo-dev-client": "~2.4.12"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

的数据

**你尝试了什么,你期待什么?**在改变屏幕之前尝试将透明设置为假,但不起作用。

编辑:也尝试了presentationStyle=“formSheet”,也崩溃了。

r6vfmomb

r6vfmomb1#

发现我做错了什么。我不得不首先关闭模态,然后继续与用户auth。IM新对不起

相关问题