react-native - 三元运算符中使用的“OnPress”非功能性

Question

我是 React Native 的新手。我正在尝试根据“全局”值的值来呈现按钮。这令人难以置信的沮丧。
通常，使用 'if/else' 语句在 Javascript 或几乎任何其他语言中完成此操作是一个简单的例子。显然，这在 React Native 中是不可能的。这是我的代码：

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 }) {
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="Do Stuff"> onPress={() => navigation.navigate('Stuff')} </Button>)}
  </>
 );

}

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="Stuff" component={StuffScreen} />
   </Stack.Navigator>
  </NavigationContainer>
 );
}

export default App;

上面的代码正确地呈现了一个“主页”屏幕，其中的按钮显示为“Go to Login”。但是，附加到按钮的“OnPress”语句不起作用......按下电话上的按钮时没有任何反应。如果我只是插入一个单独分配了“OnPress”的按钮，而没有三元运算符语句，我可以让按钮正常工作。

有人可以解释为什么在三元运算符中使用按钮时“OnPress”不起作用吗？此外，我是否能够在另一个函数（例如“登录”）中更改“isLogged”的值并将其正确传递到“主”屏幕？

为什么可以使用 'if/else' 语句处理的简单任务在 React Native 中如此具有挑战性？这让我发疯......我提前谢谢你。

标签： react-nativeconditional-operatorconditional-rendering

Answer 1

您提供 onpress 的方式是错误的。您在小时候提供它，但它应该是如下所示的道具。

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