想要更改不透明度，請點擊原始參考

這是我的代碼。當我點擊任何TouchableOpacity組件時，我想要更改參考的不透明度。請指導我如何更改不透明度或更改原始參考文獻中的顏色。當我點擊我的重定向函數調用，所以我想改變重定向函數中特定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 
    } 
});

來源

2016-08-31 Harinder88

我不完全相信，如果下面是什麼ü正在尋找：

如果你想改變TouchableOpacity的不透明度使用下列

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

如果你想改變你的文本的透明度使用下列

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

使用Stylemethods在渲染允許你從國家

採取變量

希望這是你想要的答案。如果兩者中的一個是正確的讓我知道，我刪除另一個。

最好的問候

來源

2016-09-01 09:07:41

感謝您的回覆喬納森，但我想使用反應原生參考。就像我們在jQuery中通過傳遞該文本的ID來更改特定文本的顏色一樣。我想用它來點擊特定的TouchableOpacity，如果我給出的狀態，那麼它會給所有組件相同的不透明度。感謝您的幫助:) – Harinder88

好吧:)謝謝你的錯誤理解的答案。將刪除這一個。 BR –

把你的不透明度值進入狀態。然後使按鈕單擊更改該狀態的值。這將觸發重新渲染，並且您的視圖將更新爲新的不透明度。

來源

2016-09-01 17:29:32 pomo

爲了擴大從潑墨答案...

隨着樣式，您目前擁有它們，你可以方便地調用內您的每一個onPress功能setState改變你需要改變的元素的不透明度。如果您在每個項目的狀態中使用不同的密鑰，則甚至不需要傳遞參考。

然後，在您的樣式中，您將使用一組樣式來使用來自狀態的不透明度值。

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

來源

2016-09-02 00:32:51

我不是內聯樣式風扇都沒有。所以，爲了我在最近的項目中的目的，我使用它的'ref'值設置了一個元素的樣式，然後觸發一個狀態改變，僅僅是爲了使得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>); 
}

沒有通過添加切換功能，比添加一個按鈕某處調用該函數其他改變。正如我已經指出的，該狀態值僅用於觸發渲染過程。

來源

2017-06-07 04:04:14 MichaelC

想要更改不透明度，請點擊原始參考

回答

相關問題