React Native：如何在JSX返回中使用外部声明的变量

xuo3flqw 于 2023-08-07 发布在 React

关注(0)|答案(2)|浏览(73)

尝试创建具有仅在首次启动时显示的引导序列的应用。在注册过程中，用户被要求输入他们的名字，我可以使用是否存储了一个名字值来确定应用程序是否是第一次启动，或者设备上是否有现有用户。其思想是将一个变量赋给一个字符串值，该值对应于要呈现的第一个元素;或者绕过第二大道第三次...发射等然而，当我在return（）语句之外赋值变量值时，我得到错误：Expo GO中的Property 'initial' doesn't exist。我是React Native和移动的应用程序开发的初学者，如果修复非常明显，我很抱歉;任何帮助将不胜感激！下面是我的运行时App.js文件中代码的删节版本。（注意，用户名已与密钥“user”异步存储。再次感谢！

import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native'
import { createNativeStackNavigator} from '@react-navigation/native-stack'
import React, { useEffect, useState } from 'react'

import Onboarding from './screens/Onboarding'
import Onboarding2 from './screens/Onboarding2'
import Onboarding3 from './screens/Onboarding3'
import Onboarding4 from './screens/Onboarding4'
import Onboarding5 from './screens/Onboarding5'
import Home from './appscreens/Home'
import About from './appscreens/About'
import Name from './screens/Name'

const Stack = createNativeStackNavigator()

const navTheme = {
  colors: {
    background: 'transparent'
  }
}

export default function App() {

  const [user, setUser] = useState({})

  const findUser = async () => {
    const result = await AsyncStorage.getItem('user')
    setUser(JSON.parse(result))
    console.log(user)
  }

  useEffect(() => {
    findUser()
  }, [])

  if (!user.name){const initial = "Onboarding"}
  if (user.name){const initial = "Home"}

  return (
    <NavigationContainer theme={navTheme}>
      <Stack.Navigator initialRouteName={initial} screenOptions={{headerShown: false}}>
        <Stack.Screen name="Onboarding" component={Onboarding} />
        <Stack.Screen name="Onboarding2" component={Onboarding2} />
        <Stack.Screen name="Onboarding3" component={Onboarding3} />
        <Stack.Screen name="Onboarding4" component={Onboarding4} />
        <Stack.Screen name="Onboarding5" component={Onboarding5} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
        <Stack.Screen name="Name" component={Name} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

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

字符串

react-native

来源：https://stackoverflow.com/questions/76791064/react-native-how-to-use-externally-declared-variables-inside-jsx-return

2条答案

按热度按时间

ukdjmx9f1#

编译器错误很明显。您正在访问超出其定义范围的变量initial：
重构代码如下：

import AsyncStorage from "@react-native-async-storage/async-storage";
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React, { useEffect, useState } from "react";

import Onboarding from "./screens/Onboarding";
import Onboarding2 from "./screens/Onboarding2";
import Onboarding3 from "./screens/Onboarding3";
import Onboarding4 from "./screens/Onboarding4";
import Onboarding5 from "./screens/Onboarding5";
import Home from "./appscreens/Home";
import About from "./appscreens/About";
import Name from "./screens/Name";

const Stack = createNativeStackNavigator();

const navTheme = {
  colors: {
    background: "transparent",
  },
};

export default function App() {
  const [user, setUser] = useState(null);
  const [initialRoute, setInitialRoute] = useState("OnBoarding");

  const findUser = async () => {
    const result = await AsyncStorage.getItem("user");
    setUser(JSON.parse(result));
    console.log(user);

    if (user?.name) {
      setInitialRoute("Home");
    }
  };

  useEffect(() => {
    findUser();
  }, []);

  if (!user) return null;

  return (
    <NavigationContainer theme={navTheme}>
      <Stack.Navigator
        initialRouteName={initialRoute}
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Onboarding" component={Onboarding} />
        <Stack.Screen name="Onboarding2" component={Onboarding2} />
        <Stack.Screen name="Onboarding3" component={Onboarding3} />
        <Stack.Screen name="Onboarding4" component={Onboarding4} />
        <Stack.Screen name="Onboarding5" component={Onboarding5} />
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
        <Stack.Screen name="Name" component={Name} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

字符串

赞(0）回复(0）举报 2023-08-07

i34xakig2#

你可以通过在你的代码中添加一些东西来做到这一点。首先设置一个状态变量并声明初始值如下，

const [initial, setInitial] = useState("Onboarding"); // Declare the initial state here

字符串
然后，根据用户的存在状态更新初始状态

useEffect(() => {
      if (user.name) {
        setInitial("Home");
      } else {
        setInitial("Onboarding");
      }
    }, [user]);

型
现在，应用应根据存储中是否存在用户的姓名正确确定是显示引导屏幕还是显示主屏幕。

赞(0）回复(0）举报 2023-08-07

我来回答

React Native：如何在JSX返回中使用外部声明的变量

2条答案

相关问题

热门标签

最新问答