代码之家 › 专栏 › 技术社区 › MoKhajavi75

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

ecmascript-6 react-native reactjs javascript

MoKhajavi75 · 技术社区 · 7 年前

我创建了一个浮动的操作按钮,我想在到达 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 滚动到“结束”并更改状态,以便我可以根据该状态更改不透明度。

提前谢谢!

2 回复 | 直到 7 年前

Ravi Raj 7 年前

在更改像你想的那样不透明。

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

在react native core中修复之前,简单的解决方案是在视图中包装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',
  },
});

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

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

Mohammed Ashfaq 7 年前

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

{alignItems:'居中',填充:10} 然后用touchablecompacity样式定义它们。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前