更改活動狀態和撓曲過渡

Question

我有一個反應組件類像下面

<View style={{flex: 1}}> 
    <TouchableOpacity style={styles.FreeCoffee}/> 
    <TouchableOpacity style={styles.Help}/> 
</View> 

既touchableopacity組件具有柔性2的值，以便它們同樣在窗口劃分。當其中一個touchableopacity按下時，我想在flex到2之間轉換爲4，這樣一個盒子可以隨着動畫一起增長，也可以將其標記爲「活動」或「選定」。我已經搜索了很多次，但因爲我是ReactNative的初學者，所以找不到任何適當的方法。

這是可能或可以實現的嗎？

//編輯全碼

import React from 'react' 
import {ScrollView, Text, View, TouchableOpacity, Button} from 'react-native' 
import styles from '../Styles/Containers/HomePageStyle' 


export default class HomePage extends React.Component { 
    constructor(props){ 
     super(props); 

     /*this.state = { 
      active : { flex : 8 } 
     }*/ 
    } 

    render() { 
     return (
      <View style={styles.mainContainer}> 
       <View style={{flex: 1}}> 
        <TouchableOpacity style={styles.FreeCoffee}/> 
        <TouchableOpacity style={styles.Help}/> 
       </View> 
      </View> 
     ) 
    } 
    componentWillMount(){ 

    } 
    animateThis(e) { 

    } 
} 

Answer 1

您可以使用LayoutAnimation做到這一點。定義切換應用於渲染的樣式並使用TouchableOpacity中的onPress來定義調用LayoutAnimation和setState的函數的狀態。像下面這樣：

import React from 'react'; 
    import { LayoutAnimation, ScrollView, StyleSheet, Text, View, TouchableOpacity, Button } from 'react-native'; 
    // import styles from '../Styles/Containers/HomePageStyle' 

    const styles = StyleSheet.create({ 
     mainContainer: { 
     flexGrow: 1, 
     }, 
     FreeCoffee: { 
     backgroundColor: 'brown', 
     flex: 2, 
     }, 
     Help: { 
     backgroundColor: 'blue', 
     flex: 2, 
     }, 
     active: { 
     flex: 4, 
     borderWidth: 1, 
     borderColor: 'yellow', 
     }, 
    }); 

    export default class HomeContainer extends React.Component { 
     constructor(props) { 
     super(props); 

     this.state = { 
      active: 'neither', 
     }; 
     this.setActive = this.setActive.bind(this); 
     } 
     setActive(active) { 
     // tells layout animation how to handle next onLayout change... 
     LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); 

     // set active in state so it triggers render() to re-render, so LayoutAnimation can do its thing 
     this.setState({ 
      active, 
     }); 
     } 
     render() { 
     return (
      <View style={styles.mainContainer}> 
      <View style={{ flex: 1, backgroundColor: 'pink' }}> 
       <TouchableOpacity 
       style={[ 
        styles.FreeCoffee, 
        (this.state.active === 'FreeCoffee') && styles.active]} 
       onPress={() => { 
        this.setActive('FreeCoffee'); 
       }} 
       /> 
       <TouchableOpacity 
       style={[ 
        styles.Help, 
        (this.state.active === 'Help') && styles.active]} 
       onPress={() => { 
        this.setActive('Help'); 
       }} 
       /> 
      </View> 
      </View> 
     ); 
     } 
    }