react-native - react 导航模式高度

Question

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

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

Answer 1

这是 react-navigation 中如何实现此目的的示例v3.x:

应用容器

const TestRootStack = createStackNavigator(
  {
    TestRoot: TestRootScreen,
    TestModal: {
      screen: TestModalScreen,
      navigationOptions: {
        /**
         * Distance from top to register swipe to dismiss modal gesture. Default (135)
         * https://reactnavigation.org/docs/en/stack-navigator.html#gestureresponsedistance
         */
        gestureResponseDistance: { vertical: 1000 }, // default is 135 },
      },
    },
  },
  {
    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',
  },
});