web-dev-qa-db-ja.com

Reactナビゲーションモーダルの高さ

高さをどのように設定すればいいですか React Navigation モーダルビューが表示されたら、画面の下部から約半分しかカバーせず、下のビューは表示されたままになりますか？

更新：App Storeの購入モーダルに似たuxフローを作成しようとしています。ある種類のStackNavigatorが、画面の下半分。

App Store modal

react-nativemodal-dialogreact-navigation
7
matthew

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モーダル

11
Yanci Nerio

これをreact-navigation v3.xで実現する方法の例を次に示します。

demo

アプリコンテナー

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

React-navigation v3.xでは、propのtransparentCard：trueを使用できます。詳細については、こちらをご覧ください。 https://stackoverflow.com/a/55598127/6673414

1
Cristian Mora

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>
0
Linton Samuel Dawson