React Native - 在按鈕上隱藏和顯示組件點擊動畫

朋友我有隱藏和顯示在運行時當用戶點擊按鈕的組件（視圖）必須隱藏並再次點擊它應該顯示的按鈕。React Native - 在按鈕上隱藏和顯示組件點擊動畫

mycode的：

constructor(props) { 
    super(props); 
    this.state = { 
     isModalVisible : false, 
    }; 
    } 

callFunc(){ 
    if(this.isModalVisible){ 
    this.setState({isModalVisible:false}); 
    }else{ 
    this.setState({isModalVisible:true}); 
    } 
} 

render() { 
    return (

     <View style = {styles.companyScroll}> 
     <Button 
      onPress={this.callFunc} 
      title="Learn More" 
      color="#841584" 
      accessibilityLabel="Learn more about this purple button" 
     /> 

     {this.state.isModalVisible && <Picker style ={{backgroundColor : 'white'}} 
       selectedValue={this.state.language} 
       onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}> 
       <Picker.Item label="Java" value="java" /> 
       <Picker.Item label="JavaScript" value="js" /> 
       </Picker> 

     </View> 
    ) 
}

我要像下面的圖片。

來源

2017-08-03 Kirit Modi

您還應該使用this.state.isModalVisible而不是this.isModalVisible從callFunc()。

來源

2017-08-03 06:00:32

謝謝。工作中。但想要動畫。任何想法。 –

什麼樣的動畫，不透明或下拉或其他？ – Val

你應該使用動畫組件。 https://facebook.github.io/react-native/docs/animated.html –

你錯過了功能綁定：

constructor(props) { 
    super(props); 

    this.callFunc = this.callFunc.bind(this); 
    ... 
}

沒有它，callFunc不會在this對象的範圍，並有將其狀態的訪問權限。

而@ @AlexanderIgnácz說，那裏有一個錯字 - 應該將this.isModalVisible更改爲this.state.isModalVisible。也許晚了，但我也想說，併爲此目的來完成這個答案。

來源

2017-08-03 05:55:51 Val

我會嘗試但不工作。該功能被調用並且只能打開視圖，但它不會在第二次敲擊時隱藏。 –

關於動畫，請檢查我關於卡組件顯示和隱藏的另一個答案。它可能對你有用。 https://stackoverflow.com/a/45428351/681830 – Val

呃，聯繫我什麼？我們可以在這裏提問/回答嗎？ – Val

在構造函數中添加

this.callFunc = this.callFunc.bind(this);

在onPress與

{()=>{ this.callFunc(); }

你可以在這裏看到一個豆蔻例如更換：

https://snack.expo.io/HkxpgSlPZ

@ +

來源

2017-08-03 06:23:05 TrinitA

React Native - 在按鈕上隱藏和顯示組件點擊動畫

回答

相關問題