Question

我是新来的本地人。

我的屏幕包含2个按钮，每个按钮打开相同的<Modal>组件，但其中的<View>会根据点击的按钮发生变化。

例如：

如果我点击第一个按钮，文本输入将显示在模态中;如果我单击第二个按钮，开关将显示在模态中。

我制作了一个模态组件（Modal.tsx）：

export default class Modal extends Component {

  public render() {
    return (
      <View style={style.modal} >
        {this.props.children}
      <View>
    )
  };
}

// Specific modal implementation with TextInput
const ModalWithTextInput = props => (
  <TextInput
    value={props.someValue}
  />
)


// Specific modal implementation with Switch
const ModalWithSwitch = props => (
  <Switch
    value={props.someValue}
  />
)

现在在我的5键屏幕（ButtonsScreen.tsx）中，我根据点击的按钮打开正确的模态：

openTextModal = () => {
   this.setState({ modalVisible: true, modalType: 'text' });
}

openSwitchModal = () => {
   this.setState({ modalVisible: true, modalType: 'switch' });
}

使用例如onPress={this.openTextModal}

调用这些函数

最后，我将模态渲染为：

renderModal = (type) => {
    if (type === 'text') {
        return <ModalWithTextInput someValue="default text" />
    }

    if (type === 'switch') {
        return <ModalWithSwitch someValue={false}/>
    }
}

能够做类似的事情：

<Modal
    visible={this.state.modalVisible}
    animationType={'slide'}
    onRequestClose={() => this.closeModal()}>
    <View style={style.modalContainer}>
        <View style={style.innerContainer}>
            <View>
                {this.renderModal(this.state.modalType)}
            </View>
        </View>
    </View>
</Modal>
</View>

当我尝试onPress={this.openTextModal}时，模态打开时没有内容。怎么了？

有人可以帮忙吗？感谢。

Answer 1

您将%y提供给modelContainer和innerContainer，但它没有应用于flex: 1，因为您已将其包装在另一个没有flex的View中。要么删除它或给它this.renderModal(this.state.modalType)，应该出现模态。我想这应该可以正常工作。

flex: 1

从组件中获取内容

1 个答案: