反应本机模态不打开

Question

我试图通过简单地点击一个按钮来启动一个模态框，但是由于某种原因模态框似乎没有启动

import React, { PropTypes } from 'react'
import { View, Alert, ScrollView, Text, Modal, TouchableHighlight } from 'react-native'
import { connect } from 'react-redux'
import Actions from '../Actions/Creators'
import { Actions as NavigationActions } from 'react-native-router-flux'
import CartRow from '../Components/CartRow'
import CartTotal from '../Components/CartTotal'
import RoundedButton from '../Components/RoundedButton'

// Styles
import styles from './Styles/CartAndCheckoutStyle'

class CartAndCheckout extends React.Component {

   constructor (props) {
     super(props)
     this.state = {
       modalVisible: false
     }
   }

   setModalVisible(visible) {
     this.setState({modalVisible: visible});
     console.log(visible)
   }

   static propTypes = {
     items: PropTypes.array,
   }

  render () {
    return (
      <View style={styles.container}>
        <View style={styles.currentBalance}>
          <Text style={styles.currentBalanceTitle}>CURRENT BALANCE</Text>
          <Text style={styles.currentBalanceAmount}>[=10=].00</Text>
        </View>
        <ScrollView>
          <Modal
            animationType={"slide"}
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => {Alert.alert("Modal has been closed.")}}
            >
           <View style={{marginTop: 22}}>
            <View>
              <Text>Hello World!</Text>
            </View>
           </View>
          </Modal>
          <View style={styles.cartItems}>
            {(this.props.items||[]).map((section,i) => (
              <CartRow key={i} action={this.setQty} index={i} element={section} />
            ))}
          </View>
          <CartTotal items={this.props.items||[]} />
        </ScrollView>
        <RoundedButton onPress={()=>{this.setModalVisible(true)}} text='Place Order' />
      </View>
    )
  }
}

CartAndCheckout.propTypes = {
  updateCart: PropTypes.func,
}

const mapStateToProps = (state) => {
  return {
    // items: state.cart.items,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    updateCart: (index,qty) => dispatch(Actions.updateCart(index,qty)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(CartAndCheckout)

Answer 1

我认为问题在于 <Modal> 在 <ScrollView> 中。它应该作为 ScrollView 的同级放置。尝试将模态框放在 JSX 中的 <RoundedButton> 之后。由于 Modal 创建全屏视图，因此无需将其放在 ScrollView 中。

Answer 2

您正在使用 react-native-router-flux 但您没有向我们展示场景设置。如果您查看 (https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#modals) 文档，您会看到

'To display a modal use Modal as root renderer, so it will render the first element as normal scene and all others as popups (when they are pushed). For example:'

import StatusModal from './components/StatusModal'

<Router>
  <Scene key="modal" component={Modal} >
    <Scene key="root">
      <Scene key="screen1" initial={true} component={Screen1} />
      <Scene key="screen2" component={Screen2} />
    </Scene>
    <Scene key="statusModal" component={StatusModal} />
  </Scene>
</Router>

你不应该在你的组件深处渲染模态。您需要一个围绕根的模态场景包装器，您可以在其中将任何模态场景作为同级嵌入到根。

反应本机模态不打开

react native modal not opening

modal-dialog

react-native

touchableopacity