web-dev-qa-db-ja.com

React Native --LayoutAnimation：コンポーネント/ビュー全体ではなく、コンポーネント内のオブジェクトをアニメーション化する方法は？

私はこれに従おうとしています例（コードここ）そしてRNプロジェクト内でLayoutAnimationを使用します（この例との違いは、レンダリングしたいだけです押されるボタンのない私のサークル）。

しかし、LayoutAnimationを追加すると、必要な円だけでなく、「スプリングイン」のアニメーションを実行するのはビュー/画面/コンポーネント全体です。アニメーション化されている円オブジェクトだけを実現するには、LayoutAnimationをどこに移動する必要がありますか？

もう一度更新：bennygenelのアドバイスに注意して、別のCirclesコンポーネントを作成し、[お気に入り]にcomponentDidMountを追加します。各Cricleコンポーネントを1つずつ追加すると、状態が時間遅延で更新されるため、個々のアニメーションが作成されます。しかし、私はまだ円を1つずつレンダリング/アニメーション化するという望ましい効果が得られていません...

class Circle extends Component {
  componentWillMount() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  }

  render() {
    return (
        <View>
          { this.props.children }
        </View>
    );
  }
}

class Favorites extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      circleCount: 0
    }
  }
  componentDidMount() {
    for(let i = 0; i <= this.props.screenProps.appstate.length; i++) {
      setTimeout(() => {
        this.addCircle();
      }, (i*500));
    }
  }
  addCircle = () => {
    this.setState((prevState) => ({circleCount: prevState.circleCount + 1}));
  }

render() {
    var favoritesList = this.props.screenProps.appstate;

    circles = favoritesList.map((item) => {
        return (
            <Circle key={item.url} style={styles.testcontainer}>
              <TouchableOpacity onPress={() => {
                  Alert.alert( "Add to cart and checkout?",
                              item.item_name + "? Yum!",
                              [
                                {text: 'Yes', onPress: () => console.log(item.cust_id)},
                                {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                              ]
                              )}}>
                <Image source={{uri: item.url}} />
               </TouchableOpacity>
            </Circle>
        )});

    return (
        <ScrollView}>
          <View>
            <View>
              {circles}
            </View>
          </View>
        </ScrollView>
    );
  }
}
javascriptreactjsreact-nativelayout-animation
8
SpicyClubSauce

から configureNext() docs;

static configureNext(config, onAnimationDidEnd?)

次のレイアウトでアニメーションが発生するようにスケジュールします。

つまり、アニメーション化するコンポーネントをレンダリングする直前にLayoutAnimationを構成する必要があります。 Circleコンポーネントを分離し、そのコンポーネントにLayoutAnimationを設定すると、レイアウト内の円だけをアニメーション化できます。

例

class Circle extends Component {
  componentWillMount() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  }

  render() {
    return (<View style={{width: 50, height: 50, backgroundColor: 'red', margin: 10, borderRadius: 25}}/>);
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      circleCount: 0
    }
  }
  componentDidMount() {
    for(let i = 0; i < 4; i++) {
      setTimeout(() => {
        this.addCircle();
      }, (i*200));
    }
  }
  addCircle = () => {
    this.setState((prevState) => ({circleCount: prevState.circleCount + 1}));    
  }
  render() {
    var circles = [];
    for (var i = 0; i < this.state.circleCount; i++) {
      circles.Push(<Circle />);
    }
    return (
    <View>
      <View style={{flexDirection:'row', justifyContent:'center', alignItems: 'center', marginTop: 100}}>
        { circles }
      </View>
      <Button color="blue" title="Add Circle" onPress={this.addCircle} />
    </View>
    );
  }
}

更新

例としてCircleコンポーネントを使用する場合は、子コンポーネントもレンダリングできるように、以下のように使用する必要があります。より詳細な説明は ここ で見つけることができます。

class Circle extends Component {
  componentWillMount() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  }

  render() {
    return (
        <View>
          { this.props.children }
        </View>
    );
  }
}
5
bennygenel