Не работает OnPress в тернарном операторе - PullRequest
Новая
       84

Не работает OnPress в тернарном операторе

0 голосов
/ 21 июня 2020

Я новичок в React Native. Я пытаюсь сделать кнопку зависимой от значения «глобального» значения. Это невероятно расстраивает. Обычно это простой случай использования оператора if / else для выполнения sh этого на 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? Это сводит меня с ума ... Заранее благодарю

1 Ответ

1 голос
/ 21 июня 2020

То, как вы предоставляете onpres, неверно. Вы предоставляете его как ребенок, но это должна быть опора, как показано ниже. 

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