Реагируйте на нижнюю модальную часть с горизонтальной прокруткой

Question

Я пытаюсь заставить модал работать так, как показано на картинке ниже. Я пробовал различные модальные решения и решения для таблиц действий, но не совсем правильно понял. Кто-нибудь знает, существует ли решение, которое может дать аналогичный результат? Спасибо ] 1

Я использовал лист действий из библиотеки (рис. Ниже), но его нельзя настроить для горизонтальной прокрутки и использования пользовательских кнопок. Я также еще не пытался создать свой собственный, я сначала хотел узнать, знает ли кто-нибудь о компоненте, который даст тот же результат.

Обычный лист действий на iOS

Answer 1

Вот простой рабочий пример согласно вашему требованию. Я использую реактивный нативный модальный для модального компонента.

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%'
  }
})