无法使用不同的参数导航到同一路线

Question

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

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>

这将导致您所得到的错误。

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

const { newText } = route.params;

至

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

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

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

以下是您可以使用的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;