更改活动状态和挠曲过渡

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