React Native底部模态与水平滚动

Question

我正试图让模态工作看起来如下图所示。我已经尝试了各种模态和动作表解决方案，但不能完全正确。有谁知道是否存在可以提供类似结果的解决方案？感谢] 1

我一直在使用图书馆的活动表（下图），但无法自定义水平滚动并使用自定义按钮。我还没有尝试创建自己的，我首先想知道是否有人知道一个组件会产生相同的结果。

iOS上的常规操作表

Answer 1

根据您的要求，这是一个简单的工作示例。我正在使用react-native-modal作为Modal组件。

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ScrollView
  } from 'react-native'
import Modal from 'react-native-modal'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      visible: false
    }
  }

  showModal = () => this.setState({visible: true})

  hideModal = () => this.setState({visible: false})

  render() {
    return (
      <View style={{flex: 1}}>
        <TouchableOpacity 
        onPress={this.showModal}
        style={{alignSelf: 'center', marginTop: 50, backgroundColor: 'grey'}}
        >
          <Text>Touch Me</Text>
          </TouchableOpacity>
          <Modal
          style={styles.modal}
          isVisible={this.state.visible}
          onBackdropPress={this.hideModal}
          >
          <ScrollView 
          horizontal={true}
          >
             {/* place your buttons here */}
            <Text>  Very Very Long String  </Text>
          </ScrollView>
          </Modal>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  modal: {
    margin: 0, 
    backgroundColor: 'white', 
    height: 100, 
    flex:0 , 
    bottom: 0, 
    position: 'absolute',
    width: '100%'
  }
})