Question

这是我的代码。当我点击任何TouchableOpacity组件时，我想改变refs的不透明度。请指导我如何改变不透明度或改变颜色与refs本地反应。当我点击我的重定向函数调用所以我想在重定向函数中更改特定ref的不透明度，我传递ref和routename是重定向函数。

我

mport React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet
} from 'react-native';
export default class Navigation extends Component {
  redirect(routeName,ref)
  {
      console.log(this.refs[ref]]);
      this.props.navigator.push({
      ident: routeName
     });
  }
  render() {
    return (
      <View style={style.navigation}>
        <View style={[style.navBar,styles.greenBack]}>
          <TouchableOpacity style={style.navPills} onPress={ this.redirect.bind(this,"AddItem","a")} ref="a">
            <Text style={[style.navText,style.activeNav]}>HOME</Text></TouchableOpacity>
          <TouchableOpacity style={style.navPills} onPress={ this.redirect.bind(this,"AddItem","b")} ref="b">
            <Text style={style.navText}>ORDER</Text></TouchableOpacity>
          <TouchableOpacity style={style.navPills} onPress={ this.redirect.bind(this,"ListItem","c")} ref="c">
            <Text style={style.navText}>SHOP LIST</Text></TouchableOpacity>
          <TouchableOpacity style={style.navPills} onPress={ this.redirect.bind(this,"ListItem","d")} ref="d">
            <Text style={style.navText}>DUES</Text></TouchableOpacity>
        </View>
        <View style={style.titleBar}>
          <Text style={style.titleBarText}>{this.props.title}</Text>
        </View>
      </View>
    );
  }
}
const style = StyleSheet.create({
 navigation:{
    top:0,
    right:0,
    left:0,
    position:'absolute'
  },
  navBar:{
    flexDirection:'row',
    padding:10,
    paddingTop:15,
    paddingBottom:15,
  },
  navPills:{
    flex:1,
    alignItems:'center'
  },
  navText:{
    flex:1,
    textAlign:'center',
    fontSize:16,
    fontWeight:'bold',
    color:'#ffffff',
    opacity:0.7
  },
  titleBar:{
    backgroundColor:'#ffffff',
    flex:1,
    padding:8,
    alignItems:'center',
    borderBottomWidth:1,
    borderBottomColor:'#dddddd'
  },
  titleBarText:{
    fontSize:18  
  },
  activeNav:{
    opacity:1
  }
});

Answer 1

我不确定以下是你正在搜索的内容：

如果您想更改TouchableOpacity的不透明度，请使用以下

＆＃13;

export default class Navigation extends Component {
  state={
    opacity: 0.1
  }
  
  handleOnPress = () => {
    this.setState({
      opacity: 0.5 //Anything u want
    });
  }
  

  render(){
    return(    
      <TouchableOpacity underlayColor={'rgba(0,0,0,this.state.opacity)'} onPress={this.handleOnPress}>
    )
  }
}

＆＃13;

如果您想更改文字的不透明度，请使用以下

＆＃13;

export default class Navigation extends Component {
  state = {
    opacity: 0.1
  }
  
  handleOnPress = () => {
    this.setState({
      opacity: 0.5 //Anything u want
    });
  }
  

  render(){
    return(    
    <TouchableOpacity onPress={this.handleOnPress}>
       <Text style={[style.navText, {opacity: this.state.opacity}]}>DUES</Text>
    </TouchableOpacity>
    )
  }
}

＆＃13;

使用渲染中的Stylemethods可以从状态中获取变量

希望这是你想要的答案。如果其中一个是权利让我知道，我删除另一个。

最好的问候

Answer 2

将您的不透明度值置于状态。然后单击按钮更改该状态的值。这将触发重新渲染，您的视图将使用新的不透明度进行更新。

Answer 3

扩大pomo的答案...

使用您当前拥有的样式，您可以轻松地在每个setState函数中调用onPress来更改您需要更改的元素的不透明度。如果您为每个项目使用状态中的其他键，则甚至不需要传递引用。

然后，在您的样式中，您将使用一组样式来使用状态的不透明度值。

style={[style.navPills, { opacity: this.state.opacityA }]}

Answer 4

我根本不是内联风格的粉丝。所以，为了我在最近的一个项目中的目的，我使用它的＆＃39; ref＆＃39;来设置元素的样式。值，然后触发状态更改仅仅是为了调用render函数。这就是我相信你所要求的，这个示例代码应该指向正确的方向，否则这将有助于将来的其他人。

toggleDisplay() {
  if (this.refs.blah.style.display === "") {  // currently visible
    this.refs.blah.style.display = "none";
    this.setState({showBlah = false});
  } else {  // currently not visible
    this.refs.blah.style.display = "";
    this.setState({showBlah: true});
  }
}

render() {
  // Some element defined with the ref value used above.
  return (<div>
      <div ref="blah">Now you see me...</div>
      <button onClick="this.toggleDisplay">Toggle Me</button>
    </div>);
}

我的渲染功能中没有任何东西通过添加切换功能而改变，除了在某处添加按钮来调用该功能。正如我已经指出的那样，该状态值仅用于触发渲染过程。

想要通过点击反应原生参考来改变不透明度

4 个答案: