1

我正在尝试通过单击按钮来启动模式，但无论出于何种原因，模式似乎都没有启动

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}>$0.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)
4

2 回答 2

1

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

于 2017-05-01T13:46:48.753 回答
1

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

'要显示模态，使用模态作为根渲染器，因此它将第一个元素渲染为普通场景，所有其他元素作为弹出窗口（当它们被推送时）。例如：'

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>

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

于 2017-05-01T16:23:52.773 回答