¿Cómo configuro la altura de una vista modal React Navigation para que, una vez que haya aparecido, solo cubra aproximadamente la mitad de la pantalla desde de abajo hacia arriba, y la vista de abajo permanece visible?

Actualización: estoy tratando de crear un flujo de UX similar al modo de compra de la App Store, donde algún tipo de StackNavigator está anidado en un modal que llena la mitad inferior de la pantalla.

App Store modal

8
matthew 26 feb. 2018 a las 19:33

4 respuestas

La mejor respuesta

En su stacknavigator puede configurar estas opciones:

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

Y en tu pantalla modal:

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>
    );
  }
}

También puede consultar esta merienda expo https://snack.expo.io/@yannerio/modal que he creado para mostrar cómo funciona, o puede usar React Native Modal

12
Yanci Nerio 26 feb. 2018 a las 19:06

Aquí hay un ejemplo de cómo lograr esto en react-navigation v3.x:

demo

Contenedor de aplicaciones

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);

Pantalla raíz

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',
  },
});

Pantalla modal

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',
  },
});

9
desmond 29 jun. 2019 a las 12:40

Para react-navigation v3.x puede usar la prop transparentCard: true, puede ver más detalles aquí: https://stackoverflow.com / a / 55598127/6673414

1
Cristian Mora 9 abr. 2019 a las 17:34

Si desea utilizar reaccionar modal nativo, puede hacer que la vista principal sea transparente y agregue una vista en la parte inferior

<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>
0
Linton Samuel Dawson 18 sep. 2019 a las 07:24