更改活动状态和弹性过渡

Change active state and flex transition

我有一个 React 组件 class 如下所示

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

两个 touchableopacity 组件都具有 flex 2 的值,因此它们在 window 中平分。当按下其中一个 touchableopacity 时,我想在 flex 到 2 到 4 之间进行过渡,以便一个盒子可以随着动画增长,并将其标记为 "active" 或 "selected" 一个。我已经搜索了很多次,但由于我是 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) {

    }
}

您可以使用 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>
        );
      }
    }