我试图让一个透明的叠加层在应用程序中向下滑动,这里非常像这样(全部/过滤器):

到目前为止,我发现了react-native-slider和react-native-overlay.我将滑块修改为从上到下工作,但它总是沿着ListView向下移动.如果使用react-native-overlay,叠加层是静态的,我无法移动它.

我在这个要点中添加了原始react-native教程中的一些演示代码.单击按钮时,内容应该粘住,菜单应叠加.透明度现在并不重要,但会很棒.

什么是最聪明的解决方案？

以下是我创建的反应原生模态,仍然无法找到如何调暗背景和透明模式周围的透明.我没有使用任何外部库并试图找到没有库的解决方案.这是可以做到这一点？

我的模态组件

render() {
let modal = this.state.modalType=='skill'? <SkillModal /> : <TrialModal />;
return (
  <View style={styles.container}>
    <Modal
      animationType='slide'
      onRequestClose={() => console.log('no warning')}
      presentationStyle="FormSheet"
      transparent
      visible={this.state.showModal}
    >
      <View>
        <View style={styles.modalView} >
          <TouchableOpacity
            onPress={this.closeModalFunc}
          >
            <Text style={styles.closeText}>X</Text>
          </TouchableOpacity>
          <View>
            {modal}
          </View>
        </View>
      </View>
    </Modal>
  </View>
  );
}

模态组件样式

import {StyleSheet} from 'react-native';
import colors from '../../../theme/colors';
import metrics from '../../../theme/metrics';
import {container} from '../../../theme/base';

const styles = StyleSheet.create({
container: {
 backgroundColor: colors.background.gray,
},
modalView: {
 backgroundColor: colors.background.white,
 margin: 40,
},
closeText: …

有人有实施经验react-native-modal吗？当我使用它时，当我点击模态之外时，模态不会关闭。

这是我尝试过的

• 添加 onBackdropPress(() => {this.props.hideModal()})
• 在组件内部和外部添加 TouchableWithoutFeedback
• 和许多其他方法...

这是我想要显示模式的屏幕。

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView>
               // CONTENT HERE
               {this._renderModal()} //rendering modal here
               <FABs onFABsPress={this._showModal} /> // I open Modal when I press the FABs button
            </ScrollView>
        </View>
    )
);

_renderModal = () => {
    return (
      <CameraImageSelectModal
        hideModal={this._hideModal}
        isModalVisible={this.state.isModalVisible}
        navigation={this.props.navigation}
      />
    )
}

这是模态组件：CameraImageSelectModal.js

render() {
    let { isModalVisible } = this.props;
    return (
      <View>
        <Modal
          isVisible={isModalVisible}
          onBackdropPress={() => {console.log('hey')}}>
          transparent={true}>
          <View style={styles.modalContainer}>
            <View style={styles.modalTitleTextContainer}> …