无法导航到具有不同参数的同一路线

Question

在react-native 中是否可以使用不同的参数导航同一条路线？当我尝试它时，它一直给我一个错误，说参数未定义。这是我的代码：

function Home({ route, navigation }){
const { newText } = route.params;
return (
<View style={styles.container}>
  <Text style={{fontSize:30, paddingVertical:150, fontWeight:'bold'}}>Current Balance: {JSON.stringify(newText)} PHP</Text>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("AddBalance")}>
    <Text style={styles.btnLogin}>Add Balance</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("ViewCode")}>
    <Text style={styles.btnLogin}>View Code To Pay</Text>
  </TouchableOpacity>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Login")}>
    <Text style={styles.btnLogin}>Logout</Text>
  </TouchableOpacity>
  </View>
 );
}

function AddBalance({ navigation }){
const[balance, newBalance] = useState(0)
const[amount, setAmount] = useState()

function addTogether(){
const Total = balance + amount;
newBalance(Total);
MyFunction();
}
return (
  <View style={styles.container}>
    <Text style={{fontSize:30, paddingVertical:20, fontWeight:'bold'}}>Add Balance</Text>
    <TextInput style={styles.inputBox} placeholder="Enter Amount" keyboardType={'numeric'} 
    onChangeText={(text) => setAmount(Number.parseInt(text))}></TextInput>
    <TouchableOpacity style={styles.btnLogin1} onPress ={addTogether}>
      <Text style={styles.btnLogin}>Continue</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home", {newText: 
       balance})}>
      <Text style={styles.btnLogin}>Back</Text>
    </TouchableOpacity> 
    </View>
);
}

function ViewCode({ navigation }){
return (
<View style={styles.container}>
  <Text style={{fontSize:30, fontWeight:'bold'}}>Your Code is:</Text>
  <Text style={{fontSize:20, textAlign:'center'}}>R3fGH7X95iW</Text>
  <TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
    <Text style={styles.btnLogin}>Back</Text>
    </TouchableOpacity>
  </View>
);
}

所以当我导航到ViewCode 付款并单击返回按钮时，错误就出现了。我该如何解决这个问题？我还为家庭创建了一个重复屏幕以设法返回主屏幕，但是当我尝试导航到重复的主屏幕时，当前余额再次变为 0。我想要做的是每当用户返回主屏幕时，当前余额将基于用户添加的余额。

Answer 1

问题出在Home，您假设route.params 始终存在（代码如下）

const { newText } = route.params;

但是，当您按下ViewCode 中的返回按钮时，它将调用navigate.navigation("Home"); 而没有任何参数。 （代码如下）

<TouchableOpacity style={styles.btnLogin1} onPress={()=>navigation.navigate("Home")}>
    <Text style={styles.btnLogin}>Back</Text>
</TouchableOpacity>

这将导致你得到的错误。

解决方案是使参数可选。您可以替换此代码：

const { newText } = route.params;

到

const { newText } = route.params || {newText: ""};

您可以将"" 替换为任何其他文本作为默认newText。

为了全局保存值，我建议使用 React 中的 Context。你可以阅读更多关于它here

以下是您可以使用的Provider 组件示例：

const ExampleContext = React.createContext({
  setBalance: null,
  balance: "",
});

const ExampleProvider = (props) => {
  const [balance, setBalance] = useState("");

  return (
    <ExampleContext.Provider
      value={{
        balance: balance,
        setBalance: setBalance,
      }}
    >
      {props.children}
    </ExampleContext.Provider>
  );
};

并用ExampleProvider包裹你的导航器

然后像这样从新上下文中调用setBalance：

function AddBalance({ navigation }){
const balanceContext = React.useContext(ExampleContext);
const[amount, setAmount] = useState()

function addTogether(){
const Total = balance + amount;
balanceContext.setBalance(Total);
MyFunction();
}

并从上下文中获取平衡，而不是从route.params

function Home({ route, navigation }){
const balanceContext = React.useContext(ExampleContext);
const newText = balanceContext.balance;