0

以下のような反応コンポーネントクラスがあります

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

両方の touchableopacity コンポーネントの値が flex 2 であるため、ウィンドウ内で均等に分割されます。touchableopacity の 1 つが押されたときに、フレックスから 2 から 4 への遷移を行い、1 つのボックスがアニメーションで成長できるようにし、それを「アクティブ」または「選択済み」としてマークします。これを何度も検索しましたが、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) {

    }
}
4

1 に答える 1

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>
        );
      }
    }
于 2016-12-15T04:51:47.507 に答える