首页 > 解决方案 > TouchableOpacity Button 在实时设备上不起作用

问题描述

我在聊天页面底部有以下设置:

      <View styleName="inner-keyboard">
        <TextInput
          value={this.state.text}
          onChangeText={this.handleChange}
          numberOfLines={3}
          placeholder="Message..."
          styleName="textareainput"
          name="msginput"
          multiline={true}
          contextMenuHidden={true}
          caretHidden={true}
          disableFullscreenUI={true}
        />
        <TouchableOpacity
          onPress={this.onSend}
          onPressIn={this.onSend} delayPressIn={0}
          style={{ height: 100, width: 300, zIndex: 999 }}
          hitSlop={{ top: 25, left: 25, right: 25, bottom: 25 }}
        >
          <Text styleName="sendbutton">Send</Text>
        </TouchableOpacity>
      </View>

在 iOS 模拟器上,它工作正常。

但是,当我尝试在实际设备上使用它时,它不会。

我的风格似乎也不是特别疯狂:

.sendbutton {
  color: #536dfe;
  font-weight: bold;
  font-size: 15;
  width: 15%;
  margin-left: 1rem;
}
.inner-keyboard {
  flex-direction: row;
}
.inner-keyboard {
  background-color: #fff;
  width: 90%;
  height: 40;
  border-color: #C7C7CC;
  border-style: solid;
  border-right-width: 2;
  border-left-width: 2;
  border-top-width: 2;
  border-bottom-width: 2;
  margin: 0 auto;
  padding-top: 5;
  padding-bottom: 5;
  border-radius: 50px;
}
.textareainput {
  width: 75%;
  border-radius: 5px;
  background-color: #fff;
  margin-left: 5;
  font-size: 12;
  max-height: 70;
  min-height: 20;
}

该按钮清晰可见,但由于某种原因,我根本无法在实际设备上选择它。

标签: javascriptcssreact-native

解决方案


推荐阅读