反应导航模式高度答案

【问题标题】：React Navigation modal height反应导航模式高度
【发布时间】：2018-08-06 04:08:29
【问题描述】：

如何设置React Navigation 模态视图的高度，以便它出现后从下往上只覆盖大约一半的屏幕，并且下面的视图仍然可见？

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

【问题讨论】：

标签： react-native modal-dialog react-navigation

【解决方案1】：

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

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

在您的模态屏幕中：

class ModalScreen extends React.Component {

  render() {
    return (
      <View style={{ flex: 1 ,flexDirection: 'column', justifyContent: 'flex-end'}}>
          <View style={{ height: "50%" ,width: '100%', backgroundColor:"#fff", justifyContent:"center"}}>
            <Text>Testing a modal with transparent background</Text>
          </View>
      </View>
    );
  }
}

你也可以参考我创建的这个博览会小吃https://snack.expo.io/@yannerio/modal来展示它是如何工作的，或者你可以使用React Native Modal

【讨论】：

感谢 Yanci，这适用于标准模式，但如果我在模式中嵌套 StackNavigator，透明度会变为黑色。看看：snack.expo.io/@mattvick/navigation-playground你能解释一下opacity: 0.99是如何修复标准模态的透明度的吗？
我打开了那个零食，我无法重现变黑的透明度，我可以导航到签名者模式，然后解锁，最后是签名屏幕，一切看起来都很好，透明度就在那里。
感谢 Yanci，按照 issue 2713 中的建议在嵌套 StackNavigator 上设置 transitionConfig 修复了 iOS 和 Andriod 中的透明度问题：) 仅供参考 opacity: 1 也可以使用
@RomitKumar 添加此属性transparentCard: true 以使其与v3.x 一起工作，您可以在此处看到它工作snack.expo.io/@yannerio/ashamed-truffle
@YanciNerio opacity of 0.5 in iOS 也改变了主屏幕的不透明度，把它改成 1 就会出现同样的问题，模态屏幕的背景会变成白色而不是透明

【解决方案2】：

这是一个如何在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',
  },
});

【讨论】：

【解决方案3】：

对于 react-navigation v3.x，你可以使用 prop transparentCard: true，你可以在这里查看更多细节：https://stackoverflow.com/a/55598127/6673414

【讨论】：

【解决方案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>

【讨论】：