web-dev-qa-db-fra.com

React Hauteur modale de navigation

Comment définir la hauteur a React Navigation vue modale pour qu'une fois apparue, elle ne couvrira qu'environ la moitié de l'écran de bas en haut, et la vue ci-dessous reste visible?

Mise à jour: J'essaie de créer un flux ux similaire au mode d'achat de l'App Store, où une sorte de StackNavigator est imbriqué dans un modal qui remplit le moitié inférieure de l'écran.

App Store modal

react-nativemodal-dialogreact-navigation
7
matthew

Dans votre stacknavigator, vous pouvez définir ces options:

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

Et dans votre écran 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>
    );
  }
}

Vous pouvez également vous référer à cette collation expo https://snack.expo.io/@yannerio/modal que j'ai créé pour montrer comment cela fonctionne, ou vous pouvez utiliser React Native Modal

11
Yanci Nerio

Voici un exemple de comment y parvenir dans react-navigation v3.x:

demo

Conteneur d'application

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

Écran racine

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

Écran 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',
  },
});
8
desmond

Pour react-navigation v3.x vous pouvez utiliser la prop transparentCard: true, vous pouvez voir plus de détails ici: https://stackoverflow.com/a/55598127/6673414

1
Cristian Mora

si vous souhaitez utiliser réagissez Modal natif vous pouvez rendre la vue parent transparente et ajouter une vue en bas

<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