React Navigation Stack 不会覆盖桌面上的整个屏幕

Question

我正在使用 React Native Web 构建一个简单的 Reddit 克隆。我在使用 React Navigation 中的 StackNavigator 时遇到了这个问题。

堆栈 'screen' 似乎是根据监视器的尺寸而不是内容来计算的。因此，当当前导航屏幕之前的屏幕高度大于当前屏幕时，内容仍然可见 'behind/below' 堆栈屏幕。

我的主屏幕：

<View style={{ flex: 1, backgroundColor: colors.background }}>
   <Button style={{ margin: 5 }} action={() => props.navigation.navigate('CreatePost')}><DText>Create post</DText></Button>
   <FlatList
      data={getPosts}
      renderItem={renderPost} 
      keyExtractor={item => item.id}
   />
</View>

我的 createpost 屏幕：

<View style={{ flex: 1, backgroundColor: 'red' }}>
   <View style={styles.element}>
      <TextInput
         placeholder={'Title'}
         onChangeText={setTitle}
         value={getTitle}
      />
      <View style={styles.editor}>
         <SlateEditor setBody={setBody} />
      </View>
      <Button action={() => onCreate(getTitle, getBody)}><DText>Post</DText></Button>
   </View>
</View>

这是一个例子：

我不希望用户能够在 CreatePost 屏幕上滚动。

Answer 1

这是通过将 @react-navigation/stack 更新到 5.12.6 来解决的。

见https://github.com/react-navigation/react-navigation/commit/da35085f1e3440f26eea800c892c88aec64d072f

React Navigation Stack 不会覆盖桌面上的整个屏幕

React Navigation Stack doesn't cover whole screen on desktop

react-native

react-navigation

react-native-web