Question

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

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) {

    }
}

两个touchableopacity组件都具有flex 2的值，因此它们在窗口中平均分配。当其中一个touchableopacity按下时，我想在flex到2之间进行过渡到4，这样一个盒子可以随动画一起增长，也可以将它标记为＆＃34; active＆＃34;或者＆＃34;选择＆＃34;一。我已多次搜索过这个问题，但由于我是ReactNative的初学者，我无法找到适当的方法。

这是可能的还是可以实现的？

//编辑完整代码

var categoriasClicked = function() {
    console.log("clicked: " + $(this));
    var endpoint = $(this).attr('id');
    getFromEndpoint(endpoint);
}
$('.categorias').each(function() {
    if ($(this).closest('label').length > 0) {
        $(this).closest('label').click(function() {
            $(':radio', this).attr('checked', 'checked').each(categoriasClicked);
        });
    } else {
        $(this).click(categoriasClicked);
    }
}).filter(':checked').each(categoriasClicked);

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

更改活动状态和弹性过渡

1 个答案: