Question

我创建了一个浮动操作按钮，当我到达ScrollView的结尾时，我想更改不透明度。所以我用：

<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>;

但opacity中没有任何变化！我将onPress设置为滚动到结束并更改状态，以便可以基于该状态更改不透明度。

有什么主意吗？

谢谢！

Answer 1

在更改触摸屏时，TouchableOpacity已经存在问题不透明，如您所愿。

检查此问题页面，https://github.com/facebook/react-native/issues/17105

直到将其固定在react-native核心中之前，简单的解决方案是将TouchableOpacity的子组件包装在View中，并将不透明度逻辑应用于该View。

简单的例子，

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',
  },
});

点心.expo中的一个工作示例：https://snack.expo.io/r1vMfVg8m

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

Answer 2

在元素中使用

    <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>
  )
}

希望获得帮助。

Answer 3

也许您可以通过内联定义样式而不是使用styles.rightFAB来实现。

如果styles.rightFAB = {alignItems：'center'，padding：10} ，然后以TouchableOpacity样式定义它们。

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

有条件地响应本机更改按钮的不透明度

3 个答案: