使用布尔 React Native 在我的屏幕上更改渲染

Question

当我点击下一个按钮时，我想在同一页面中更改我的渲染。在我的组件中，我的状态 next, setNext 初始化为 false。 onPress 到我的按钮我将状态更改为 true，但是当我单击下一个按钮时没有任何反应！ 在这里你可以看到Step1 到Step2 并了解更多我需要什么^^

const [next, setNext] = useState(false);

{!next ? (
  //Step1 
  <BigButton
    title="Suivant"
    onPress={() => {
    setNext(true);
   }}
  />) : ( // Step2 )
}

我所有的代码都在这里：

import React, { useState } from "react";
import { useNavigation } from "@react-navigation/core";

import BigButton from "../components/BigButton";
import BigTextInfos from "../components/BigTextInfos";

export default function SignUpScreen({ setToken }) {
 const [next, setNext] = useState(false);
 const [showPassword, setShowPassword] = useState(false);

 const toggleSwitchPassword = () => {
   setShowPassword((prev) => !prev);
 };


 return (
   <>
     {!next ? ( // STEP 1
       <View style={{ marginTop: 60 }}>
         <BigTextInfos title="S'inscrire" subtitle="Vous êtes :" />
         <View>
           <View>
             <TouchableHighlight
               style={[styles.input, styles.inputGender]}
               onPress={() => setGender("Mme")}
             >
               <Text style={[styles.darkGrey]}>Mme</Text>
             </TouchableHighlight>
             <TouchableHighlight
               style={[styles.input, styles.inputGender]}
               onPress={() => setGender("M.")}
             >
               <Text style={[styles.darkGrey]}>M.</Text>
             </TouchableHighlight>
           </View>
           <TextInput
             style={[styles.input]}
             placeholder="Prénom"
             placeholderTextColor={colors.darkgrey}
           />
           <TextInput
             style={[styles.input]}
             placeholder="Nom"
             placeholderTextColor={colors.darkgrey}
           />

           <BigButton
             title="Suivant"
             onPress={() => {
               setNext(true);
             }}
           />
         </View>
       </View>
     ) : ( // STEP 2
       <View style={{ marginTop: 60 }}>
         <BigTextInfos title="S'inscrire" subtitle="Finalisez l'inscription" />
         <View>
           <TextInput
             style={[styles.input]}
             placeholder="Email"
             placeholderTextColor={colors.darkgrey}
           />
           <View style={[styles.input]}>
             <TextInput
               style={{ width: 300 }}
               placeholder="Mot de passe"
               placeholderTextColor={colors.darkgrey}
               color={colors.dark}
               secureTextEntry={showPassword ? true : false}
             />

             {showPassword ? (
               <Feather
                 name="eye-off"
                 size={24}
                 color={colors.grey}
                 onPress={() => {
                   toggleSwitchPassword();
                 }}
               />
             ) : (
               <Feather
                 name="eye"
                 size={24}
                 color={colors.grey}
                 onPress={() => {
                   toggleSwitchPassword();
                 }}
               />
             )}
           </View>
           <BigButton
             title="S'inscrire"
             empty="false"
             onPress={async () => {
               console.log("s'inscrire");
               const userToken = "secret-token";
               setToken(userToken);
             }}
           />
         </View>
       </View>
     )}
   </>
 );
}

Answer 1

它不起作用有点奇怪，尝试不同的方法 - 将返回逻辑分离在一个函数中并在渲染时调用该函数。它应该看起来有点像这样

const [next,setNext] = useState(false)

const handleSteps = () => {
 if(next){
  return <BigButton
     title="Suivant"
     onPress={() => {
     setNext(true);
     }}/>
 }
 return <SmallButton /> //here goes the other component
}

然后在 return 中调用该 handleSteps 函数

return(
{handleSteps()}
)