Question

如何设置React Navigation模态视图的高度，一旦它出现，它将仅从底部向上覆盖大约一半的屏幕，并且下面的视图仍然可见？

更新：我正在尝试创建类似于App Store购买模式的ux流程，其中某种StackNavigator嵌套在填充屏幕下半部分的模式中。

Answer 1

在stacknavigator中，您可以设置以下选项：

declare var require: any
var $ = require('jquery');
import 'jquery-ui-dist/jquery-ui';

在你的模态屏幕中：

  mode: 'modal',
    headerMode: 'none',
    cardStyle:{
      backgroundColor:"transparent",
      opacity:0.99
  }

另外，您可以参考我创建的世博小吃https://snack.expo.io/@yannerio/modal来展示它是如何运作的，或者您可以使用React Native Modal

Answer 2

下面是在react-navigation v3.x中如何实现此目的的示例：

应用程序容器

const TestRootStack = createStackNavigator(
  {
    TestRoot: TestRootScreen,
    TestModal: {
      screen: TestModalScreen,
      /**
       * Distance from top to register swipe to dismiss modal gesture. Default (135)
       * https://reactnavigation.org/docs/en/stack-navigator.html#gestureresponsedistance
       */
      gestureResponseDistance: 250,
    },
  },
  {
    headerMode: 'none',
    mode: 'modal',
    transparentCard: true,
  },
);

const AppContainer = createAppContainer(TestRootStack);

根屏幕

class TestRootScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Button title="Show Modal" onPress={() => this.props.navigation.navigate('TestModal')} />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

模态屏幕

class TestModalScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.innerContainer} />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'flex-end',
  },
  innerContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    top: 100,
    backgroundColor: 'red',
  },
});

Answer 3

对于react-navigation v3.x，您可以使用prop TransparentCard：true，您可以在此处查看更多详细信息：https://stackoverflow.com/a/55598127/6673414

Answer 4

如果您想使用react native Modal，则可以使父视图透明，并在底部添加视图

<Modal
      animationType="slide"
      transparent={true}
      visible={props.visible}
    >
     <View
          style={{
             backgroundColor:'transparent',
             flex:1,
             justifyContent:'flex-end'
                 }}>
          <View
               style={{
                   backgroundColor:'green',
                   height:'20%'
                 }}>
               <Text>Hello World!</Text>
               <TouchableHighlight
                    onPress={props.closeModal}>
                     <Text>Hide Modal</Text>
               </TouchableHighlight>
          </View>
    </View>
 </Modal>

Answer 5

在 react-navigation v5/v6 中，您可以使用 safeAreaInsets 轻松完成，但将其应用到屏幕本身的 options 上，如下所示，而不是将其应用到屏幕的 screenOptions文档中的堆栈导航器。

缺点：您仍然可以通过滑动来关闭它，感谢gestureResponseDistance，但您将无法触摸灰色区域来关闭它。

 <Stack.Navigator
        mode="modal"
        screenOptions={{
          headerShown: false,
          gestureEnabled: true,
          gestureResponseDistance: { vertical: 1000 }, // hacks gesture back in 
          cardOverlayEnabled: true,
          ...TransitionPresets.ModalPresentationIOS,
        }} >

    <Stack.Screen 
        name="App" 
        component={App} // all your normal app stack
        options={{ animationEnabled: false }} />

    <Stack.Screen
        name="Modal"
        component={Modal}  // your actual modal
        options={{
            safeAreaInsets: { top: 300 } // here's the key to pushing it down
        }}/>

</Stack.Navigator>

反应导航模态高度

5 个答案:

应用程序容器

根屏幕

模态屏幕