如何在不同的文件中获得React State更新以使用SwitchNavigator

Question

我对React Native还很陌生，这可能需要一个简单的解决方案，而且/或者我完全错了。

我想创建一个条款和条件页面。因此，在我的TermsAndCondition.js中，我创建了一个isAccepted = React.useState(false)，然后将其导入到App.js。

当第一次重新加载App.js时，它将具有isAccepted = false的状态。当状态更改为isAccepted = true时，我的按钮可以工作，但它不会在App.js中更新它，以允许我使用"SwitchNavigator"切换到不同的屏幕集。

我只想能够看到我的条款和条件屏幕，但它本身并不是一个堆栈的一部分。有没有办法让isAccepted在另一个文件中更新，或者让这个想法继续下去？

遵循我的代码。

App.js

const Stack = createStackNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
{!isAccepted ? (
<Stack.Navigator>
<Stack.Screen
name="Terms and Conditions"
component={TermsAndConditions}
/>
</Stack.Navigator>
) : (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="mapListScreen" component={mapListScreen} />
<Stack.Screen name="mapScreen1" component={mapScreen1} />
</Stack.Navigator>
)}
</NavigationContainer>
);
}
}

TermsandCondition.js

function TermsAndConditions() {
const [isAccepted, setIsAccepted] = React.useState(false);
const [isActive, setIsActive] = React.useState(false);
const handleAcceptInput = () => {
setIsAccepted(!isAccepted);
};
const handleActiveInput = () => {
setIsActive(!isActive);
};
return (
<View style={styles.container}>
<Text style={styles.title}>Terms and conditions</Text>
<ScrollView
style={styles.tcContainer}
onScroll={({ nativeEvent }) => {
if (isCloseToBottom(nativeEvent)) {
handleActiveInput();
}
}}
>
<Text style={styles.tcP}>Some text</Text>
</ScrollView>
<TouchableOpacity
disabled={!isActive}
onPress={() => handleAcceptInput()}
style={isActive ? styles.button : styles.buttonDisabled}
>
<Text style={styles.buttonLabel}>Accept</Text>
</TouchableOpacity>
</View>
);
}
export default TermsAndConditions;

Answer 1

你不能像这样在堆栈导航器中访问你的状态，你必须使用React Redux。