Question

由于React Native中的<Modal>有点儿麻烦，所以我自己制作了一个<View>，它在this.state.display为true时呈现。但是，在单击和交互时，文本输入和按钮没有任何作用。

我尝试使用常规的<Modal>，但更喜欢我的方式。以及更改模态的实际样式。我添加了不同的onPresses和其他一些无效的小代码调整。

  shouldRender() {
    if (this.state.display) {
      return (
        <View style={styles.modal}>
          <TextInput
            placeholder="Event Title"
            onChangeText={title => this.setState({title})}
            value={this.state.title}
            style={styles.textInput}
           />
          <TextInput />
          <Button />
          <Button /> //the other buttons and textinput has similar things
        </View>
      );
    } else {
      return <View></View>;
    }
  }

在render方法中：

return(
<TouchableOpacity
  onPress={this.addReminder}
  style={styles.reminderTouch}>
  <Text style={styles.reminderBtn}>+</Text>
</TouchableOpacity>
)

addReminder方法只是将this.state.display设置为true

我正在寻找用于提交/关闭模式和文本输入以更改标题和文本状态的按钮。现在，按钮在按下时不会动画，并且无法单击文本输入。

此外，在模式之前，当文本输入仅在屏幕上显示时，一切正常。

Answer 1

您的描述听起来像zIndex的问题-如果按钮的不透明度和输入焦点无法正常工作，则模态上方会呈现某些东西。

我会尝试将<View>{this.shouldRender()}</View>移到您的render方法中包含<View>的最后一个子级中，如果不起作用，则将zIndex向上移。

Answer 2

您可以在render（）中做类似的事情

render(){
  return(
  <Modal visible={this.state.display} style={styles.modal}>
      <TextInput
        placeholder="Event Title"
        onChangeText={title => this.setState({title})}
        value={this.state.title}
        style={styles.textInput}
       />
      <TextInput />
      <Button />
      <Button /> //the other buttons and textinput has similar things
  </Modal>
  <TouchableOpacity
    onPress={this.setState({display: true})}
    style={styles.reminderTouch}>
    <Text style={styles.reminderBtn}>+</Text>
  </TouchableOpacity>
 )
}

此模式只会在this.state.disaply == true

时显示

反应Natvie按钮和textInput不起作用

2 个答案: