React Native 内置的模态在返回屏幕时不可见

Question

我对这段代码有点困惑， 我有两个屏幕，MainScreen和FeedScreen里面NativeStackNavigator， 其中initialScreenName(将首先路由/渲染的屏幕)MainScreen。

我在MainScreen中嵌套了一个模态，在模态内部有一个按钮可以导航到FeedScreen，在导航到FeedScreen时，Modal是可见的，但在返回MainScreen时，Modal不再可见，甚至在单击"显示模态"按钮后无法打开......

其中Modal可见性由state变量控制，这也是正确的，但仍然Modal不可见......

请指出这里发生了什么，因为据我说，Modal应该在从FeedScreen回来MainScreen时开放......

这是代码...

function MainScreen({navigation}){
const [modalVisibility, setModalVisibility] = useState(false)
return <View>
<Text style={{ fontSize: 25 }}>I'm Main Screen...</Text>
<Text>{String(modalVisibility)}</Text>
<Button title='Show Modal' onPress={()=>setModalVisibility(true)} ></Button>
<Modal visible={modalVisibility} onRequestClose={()=>setModalVisibility(false)}>
<Text>I'm modal with visiblility {String(modalVisibility)}</Text>
<Button title='Go to Feed' onPress={()=>navigation.navigate('FeedScreen')}/> 
</Modal>
</View>
}
function FeedScreen({navigation}) {
return <View>
<Button title='Go to Main' onPress={()=>navigation.navigate("MainScreen")}></Button>
</View>
}
function RootStackScreen() {
return (
<NavigationContainer>
<RootStack.Navigator initialRouteName='MainScreen'>
<RootStack.Screen name="MainScreen" component={MainScreen}/>
<RootStack.Screen name="FeedScreen" component={FeedScreen}/>
</RootStack.Navigator>
</NavigationContainer>

Answer 1

问题是 modalVisibility 状态没有为 FeedScreen 公开，这意味着 feedscreen 无法访问该状态，您可以使用 [上下文提供程序] [1] 向它公开该状态。

[1]: https://reactjs.org/docs/context.html