Question

I am new to react native.

My question is pretty simple: my screen contains 5 buttons. Each one opens the same < Modal > component. I need to dynamically change the content of the modal, depending on the button clicked.

For example:

if I click the first button, a text input will be shown into the modal.

If I click the second button, checkboxes will be shown into the modal.

Here's my modal :

<Modal
    visible={this.state.modalVisible}
    animationType={'slide'}
    onRequestClose={() => this.closeModal()}>
    <View style={style.modalContainer}>
        <View style={style.innerContainer}>
            <Text>This is content inside of modal component</Text>
            <Button
                onPress={() => this.closeModal()}
                title="Close modal"
            >
            </Button>
        </View>
    </View>
</Modal>

Here I open it :

openModal() {
    this.setState({ modalVisible: true });
}

Here I call the function (on button press) :

onPress={() => this.openModal()}

I've heard about using props/children, but I don't know how to use them is this case.

Can anyone please help ?

Answer 1

Here is quick example to show who to render different content based on input you provide.

Modal Content

renderModalContent(type, data) {
  switch(type) {
    1: {
      return (
        <View>{..data}</View>
      )
    }
    2: {
      return (
        <Button>...</Button>
      )
    }
    default: (<CustomComponent data={data} />)
  }
}

Modal

<Modal>
  <View>
    {this.renderModalContent(this.state.type, this.state.modalContentData)}
  </View>
</Modal>

Here you decide which view you want to render and pass its data.

openModal() {
    this.setState({ modalVisible: true, type: 1, data: {...} });
}

Answer 2

您应该修改Modal组件，以便为基本布局呈现空间，以便呈现动态内容。内容将通过Props作为孩子传递。这意味着模态是动态的，将/应该支持未来的要求。尽量避免模态渲染建议中的切换案例，除非你有非常具体的要求，将来不太可能改变，或者你想以React方式做事。

然后，对于Modal的每个变体（TextInput，Checkbox等），创建一个新的Component，它包装Modal组件并让每个按钮启动渲染特定组件。

如果您正在使用Redux，那么您将创建容器，连接到Redux并传递动态状态变量。你不必使用Redux，但原理是一样的。

这是说明我的观点的一个非常基本的例子。

// Basic modal that renders dynamic content const Modal = props => { const { children } = props; render ( <View style={styles.modal} > {children} </View> ); } // Specific modal implementation with TextInput const ModalWithTextInput = props => ( <Modal> <TextInput value={props.someValue} /> </Modal> ) // Specific modal implementation with Switch const ModalWithSwitch = props => ( <Modal> <Switch value={props.someValue} /> </Modal> )

然后在启动模态的组件中，执行类似的操作......

class MyComponent extends Component { openTextModal = () => { this.setState({ modalType: 'text' }); } openSwitchModal = () => { this.setState({ modalType: 'switch' }); } renderModal = (type) => { if (type === 'text') { return(<ModalWithTextInput />) } if (type === 'switch') { return(<ModalWithSwitch />) } } render() { const { modalType } = this.state; render ( <View> <View> <TouchableWithX onPress={this.openTextModal} /> <TouchableWithX onPress={this.openSwitchModal} /> </View> <View> {this.renderModal(modalType)} </View> </View> ); } }

请注意此代码尚未测试，但原则是合理的。

Switch view depending on button click

2 个答案: