在 React Native 中显示依赖于变量值的按钮

Question

我正在使用以下代码在 React Native 中显示一个带有按钮的 'Home' 页面...它可以正常运行：

import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>Home Screen</Text>
     <Button title="Go to Login" onPress={() => navigation.navigate('Login')} />
    </View>
  );
}

function LoginScreen({ navigation }) {
//do things to login here
}

const Stack = createStackNavigator();

function App() {
 return (
  <NavigationContainer>
   <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Login" component={LoginScreen} />
   </Stack.Navigator>
  </NavigationContainer>
 );
}

export default App;

当我尝试修改代码以根据全局变量的值在 'Home' 页面上显示按钮时出现问题，我收到错误。我不确定为什么 'HomeScreen' 函数无法识别“_secured”变量的值...？

import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

var _secured = 0; 

function HomeScreen({ navigation }) {
 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text>Home Screen</Text>
   if (_secured === 0) {
   <Button title="Go to Login" onPress={() => navigation.navigate('Login')} />
   } else {
   <Button title="Stuff" onPress={() => navigation.navigate('DoStuff')} />
   }
  </View>
 );
}

function LoginScreen({ navigation }) {
//do things to login here
}

function StuffScreen({ navigation }) {
//do other things here
}

const Stack = createStackNavigator();

function App() {
 return (
  <NavigationContainer>
   <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Login" component={LoginScreen} />
    <Stack.Screen name="DoStuff" component={StuffScreen} />
   </Stack.Navigator>
  </NavigationContainer>
 );
}

export default App;

非常感谢任何建议，我是 React Native 的新手。我先谢谢你了。

不幸的是，我在尝试解决这个问题时仍然遇到了巨大的困难，这令人非常沮丧。我相信我需要使用 'useState' 定义我的 'global' 变量。我的 'Home' 屏幕代码如下：

function HomeScreen({ navigation }) {
const [isLogged, setLog] = useState(0);

 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
   <Text>Home Screen</Text>

  </View>
 );
(isLogged === 0) ? (<Button title="Go to Login"> onPress={() => navigation.navigate('Login')} </Button>) : (<Button title="Stuff"> onPress={() => navigation.navigate('DoStuff')} </Button>)
}

如前所述，我是 React Native 开发的新手。无法使用简单的 if/else 语句来实现这一点非常令人沮丧。我提前感谢任何人提供一些见解。

Answer 1

就像一个普通函数一样，react 渲染器不能 return 多个 JSX 元素。因此，将您的原始代码包装在单个 JSX EmptyView <></> 中，然后使用 JS 评估条件，最后 return 创建一个按钮视图。

function HomeScreen({ navigation }) {
const [isLogged, setLog] = useState(0);

 return (
  <>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
    {isLogged === 0 ? (<Button title="Go to Login"> onPress={() => navigation.navigate('Login')} </Button>) : (<Button title="Stuff"> onPress={() => navigation.navigate('DoStuff')} </Button>)}
  </>
 );

}

在 React Native 中显示依赖于变量值的按钮

Display buttons dependent on variable value in React Native

javascript

conditional-rendering

react-native