Javascript 有条件地反应本机更改按钮不透明度

我创建了一个浮动操作按钮，我想在到达

滚动视图的末尾时更改不透明度。因此，我使用：

<TouchableOpacity
  activeOpacity={0.5}
  onPress={() => {
    this.scrollView.scrollToEnd({ animated: true });
    this.setState({ buttonIsRight: false });
  }}
  style={[
    styles.rightFAB,
    this.state.buttonIsRight ? { opacity: 1 } : { opacity: 0 }
  ]}
>
  <Image
    source={require("../icons/plus.png")}
    style={{
      resizeMode: "center",
      aspectRatio: 1 / 1,
      tintColor: "#888888"
    }}
  />
</TouchableOpacity>;

{
this.scrollView.scrollToEnd（{animated:true}）；
this.setState（{buttonIsRight:false}）；
}}
风格={[
styles.rightFAB，
this.state.buttonIsRight？{opacity:1}:{opacity:0}
]}
>
;

但是，
透明度根本没有变化！我设置
on按
滚动至结束并更改状态，以便根据该状态更改不透明度

有什么想法吗

提前谢谢

更改设置时，TouchableOpacity已经存在问题
不透明度就像你想要的那样

查看此问题页面

在react原生核心中修复之前，简单的解决方案是将TouchableOpacity的子组件包装在视图中，并将不透明度逻辑应用于该视图

举个简单的例子

class App extends React.Component {

  state = {
    opacity: 1
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity>
          {/* Apply opacity logic to the wrapper View */} 
          <View 
            style={{
              backgroundColor: 'grey', 
              opacity: this.state.opacity
            }} 
          >
            <Text>My Button</Text>
          </View>
        </TouchableOpacity>

        <TouchableOpacity
          style={{backgroundColor: 'orange'}}
          onPress={() => this.setState({opacity: !!this.state.opacity? 0 : 1}) }
        >
          <Text>Change opacity</Text>
        </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

类应用程序扩展了React.Component{
状态={
不透明度：1
}
render（）{
返回(
{/*将不透明度逻辑应用于包装器视图*/}
我的纽扣
this.setState（{opacity:！！this.state.opacity？0:1}）
>
改变不透明度
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
},
});

snack.expo中的一个工作示例：

在iOS和Android上尝试我的工作。谢谢

可以通过内联定义样式而不是使用styles.rightFAB来实现这一点

如果styles.rightFAB={alignItems:'center'，padding:10}则在TouchableOpacity样式中定义它们

<TouchableOpacity
  style={{
   alignItems: 'center', 
   padding: 10,
   opacity: this.state.buttonIsRight ?  1: 0 
  }}
 >


在元素中使用

    <View>
      <OnPlay />
    </View>



在功能上使用

  function OnPlay() {
     const [iconPlay, setIconPlay] = useState(false);
     const [opacity, setOpacity] = useState(0);
     const show = <Image source={require('../assets/images/play-circle-outline.svg')} style={styles.welcomeImage} />;
     const hide = <Image source={require('../assets/images/pause-circle-outline.svg')} style={styles.welcomeImage} />;
         function onPressButton() {
           setIconPlay(!iconPlay);
           let val = !iconPlay == false ? 1 : 0;
           setOpacity(val);
         }
  return (
    <RectButton onPress={onPressButton} activeOpacity={opacity}  >
      {iconPlay ? show : hide}
    </RectButton>
  )
}

函数OnPlay（）{
const[iconPlay，setIconPlay]=useState（false）；
const[opacity，setOpacity]=useState（0）；
常数显示=；
常数隐藏=；
函数onPressButton（）{
setIconPlay（！iconPlay）；
设val=！iconPlay==false？1:0；
不透明度（val）；
}
返回(
{iconPlay？显示：隐藏}
)
}

希望这有帮助。
创建一个不透明度常数，然后使用它？常数不透明度=条件？0.5 : 0.8;   activeOpacity={opacity}为什么我不能使用state？你也可以这样做。首先检查this.state.buttonIsRight值是否用于else条件。this.state.buttonIsRight值应为null、false或未定义。可能是条件不起作用，第二件事是无条件应用检查不透明度。它是否工作或不比让我知道不工作和条件是好的