Question

基本上我希望能够随意调整TouchOpacity组件的不透明度。

这是我的代码

<TouchableOpacity
    className='Calculator'
    style={
      [
        styles.container,
        {
          transform:[
            {translateX:this.props.anim.x}
          ],
        }
      ]
    }
    onPress={this.hideKeyboard}
    activeOpacity={1}
  >
    <AmountInput />

  </TouchableOpacity>
);

只是给出一些背景信息： AmountInput是一个基本的文本输入框。

我正在使用TouchableOpacity在按下键盘时隐藏键盘。但是，我不希望它在发布时更改不透明度，我尝试使用TouchableWithoutFeedback，但它的onPress事件无法与TextInput一起使用。

由于我没有将TouchOpacity用于其预期用途（触摸时更改不透明度），因此activeOpacity设置为1。这取决于风格，但如果我摆脱它，那么当我触摸它的容器时，输入框会改变不透明度！

有人知道解决这个问题吗？我有一个opacity变量通过道具传递下来。

修改以下是使用TouchableWithoutFeedback

的一些代码

<TouchableWithoutFeedback
    className='Calculator'
    style={
      [
        styles.container,
        {
          opacity:1,
          backgroundColor:'red',
          transform:[
            {translateX:this.props.anim.x}
          ],
        }
      ]
    }
    onPress={this.hideKeyboard}
  >
    <AmountInput />

  </TouchableWithoutFeedback>

但由于某种原因，我在标签中定义的所有属性似乎都没有效果，我将backgroundColor样式设置为red并且它没有做任何事情。

Answer 1

我在使用TouchableWithoutFeedback时找到了解决方案。看来你需要将它的子项包装在View标记中......即使只有一个，即使文档说明：

TouchableWithoutFeedback仅支持一个孩子。如果您希望拥有多个子组件，请将它们包装在视图中。

而且我仍然无法将任何样式应用于TouchableWithoutFeedback标记，我必须将它们全部放在View个孩子身上。

这是我的更新代码：

render() {
return (
  <TouchableWithoutFeedback className='Calculator' onPressIn={this.hideKeyboard}>
    <View style={
      [
        styles.container,
        {
          opacity:this.props.anim.opacity,
          transform:[
            {translateX:this.props.anim.x}
          ],
        }
      ]
    }>
      <AmountInput />
    </View>
  </TouchableWithoutFeedback>
);

}

我遇到了很多与React-Native文档混淆和矛盾的问题。这是一个很棒的工具！对于新的反应开发者来说，文档应该更加清晰和友好。

手动设置TouchOpacity的不透明度

1 个答案: