Question

我正在尝试按照 example （代码 here ）并在我的RN中使用 LayoutAnimation 项目（与该示例的不同之处在于我只想渲染我的圈子而没有按下按钮）。

但是当我添加了LayoutAnimation时，它是整个视图/屏幕/组件，它可以完成“弹入”的动画，而不仅仅是我想要的圆圈。我必须在哪里移动LayoutAnimation才能实现动画的圆形对象？

再次更新：注意bennygenel建议制作单独的Circles组件，然后在收藏夹上，有componentDidMount逐个添加每个Cricle组件，当状态随时间延迟更新时，导致单独的动画。但是我仍然没有逐一获得圆圈渲染/动画效果......

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

Answer 1

来自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组件作为示例，则需要像下面一样使用它，以便也可以渲染子组件。可以找到更详细的解释here。

class Circle extends Component { componentWillMount() { LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); } render() { return ( <View> { this.props.children } </View> ); } }

React Native - LayoutAnimation：如何使它只是组件内的动画对象，而不是整个组件/视图？

1 个答案: