react-native - 如何强制模态中的内容为模态高度的 100%？

Question

我正在尝试使用 flexbox 使 Modalize 视图中的内容变为 Modal 视图的 100%。目前，它只会达到内容的高度，而不是模态。

使用此代码：

 <Modalize
        // onOpen={onOpen}
        onOpened={() => console.log("ONOPEN")}
        ref={modalizeRef}
        modalStyle={{ flex: 1,
          backgroundColor: 'yellow',
          shadowColor: '#000', shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.45, shadowRadius: 16,
        }}
        alwaysOpen={85}
        handlePosition="inside"
      >
      <View style={{ flex: 1, backgroundColor: 'green' }}>
        <Text>
          Data here
        </Text>
      </View>
    </Modalize>

它看起来像这样：

我怎样才能使绿色背景填充模态的整个高度？

标签： react-nativemodal-dialog

Answer 1

用于Dimensions设置高度。

示例：世博小吃

import * as React from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Modalize } from 'react-native-modalize';

const window = Dimensions.get('screen');

export default function App() {
  const modalizeRef = React.useRef();
  return (
    <View style={styles.container}>
      <Modalize
        // onOpen={onOpen}
        onOpened={() => console.log('ONOPEN')}
        ref={modalizeRef}
        modalStyle={{
          flex: 1,
          backgroundColor: 'yellow',
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 6 },
          shadowOpacity: 0.45,
          shadowRadius: 16,
        }}
        alwaysOpen={85}
        handlePosition="inside">
        <View style={{ height: window.height * 0.85, backgroundColor: 'green' }}>
          <Text>Data here</Text>
        </View>
      </Modalize>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});