'OnPress' 三元运算符中使用的非函数式

Question

我是 React Native 的新手。我正在尝试根据 'global' 值的值呈现一个按钮。这真是令人沮丧。
通常，在 Javascript 或几乎任何其他语言中使用 'if/else' 语句来完成此操作是一个简单的例子。显然这在 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;

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

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

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

Answer 1

您提供 onpress 的方式是错误的。您将其作为 child 提供，但它应该是如下所示的道具。

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

'OnPress' 三元运算符中使用的非函数式

'OnPress' non functional used in ternary operator

conditional-operator

conditional-rendering

react-native