更改活动状态和弹性转换

Question

我有一个如下所示的反应组件类

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

两个 touchableopacity 组件的值都为 flex 2，因此它们在 window.xml 中均分。当按下其中一个 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>
        );
      }
    }