Question

我是新来的本地人。

我的屏幕包含5个按钮，每个按钮打开相同的<Modal>，但其中的<View>会根据点击的按钮而改变。

如果单击第一个按钮，文本输入将显示在模态中。

如果我点击第二个按钮，开关将显示在模态中。

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

export default class Modal extends Component {

  constructor(props) {
    super(props)
  }

  public render() {
    return (
      <View style={style.modal} >
        {this.props.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>
)

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

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

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

使用onPress={this.openTextModal}

调用这些函数

最后，我需要渲染模态，以便能够执行以下操作：

<View>
   {this.renderModal(modalType)}
</View>

但我不知道如何处理renderModal函数

renderModal = (type) => {
    if (type === 'text') {
        return ???
    }

    if (type === 'switch') {
        return ???
    }
}

有人可以帮忙吗？感谢。

Answer 1

您可以使用您已经完成的所有操作来完成此操作：

            eMoney.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                accountActivity.showEMoney();
            }
        });

`   
public void showEMoney(){
        Fragment fragment = new EMoney();
        getSupportFragmentManager().beginTransaction().setCustomAnimations(R.anim.translate_right, R.anim.translate_left).replace(R.id.fragmentContainer, fragment).addToBackStack(null).commit();
    }`

    public class EMoney extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view =  inflater.inflate(R.layout.activity_emoney, container, false);
        return view;
    }
}

请务必在文件中导入这些组件以便能够使用它们（如果您在同一文件中声明它们则不需要）

Answer 2

您要做的就是更改Modal呈现的内容。因此，您不需要为内容呈现不同的模态。不要忘记将模态状态设置为visible。

renderModal = () => (
  <View>
    <Modal visible={this.state.modalVisible}>
     {this.renderModalContent()}
    </Modal>
  </View>)

renderModalContent = () => {
  if(this.state.modalType === 'switch'){
    return (<Switch
      value={props.someValue}
    />);
  } else {
   return (
    <TextInput
      value={props.someValue}
    />)
  }
}

具有可变内容的模态

2 个答案: