反应本机按钮和文本输入不起作用

Question

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

我试过使用常规 <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>;
    }
  }

在渲染方法中：

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> 移动到渲染方法中包含 <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

时才会显示此模式

反应本机按钮和文本输入不起作用

React Natvie buttons and textInput not working

javascript

modal-dialog

react-native