![](/img/trans.png)
[英]How to animate reordering of reducer array state in React Native LayoutAnimation
[英]React Native - LayoutAnimation: how to make it just animate object inside component, not whole component/view?
我正在嘗試按照這個例子 ( 這里是代碼)並在我的RN項目中使用LayoutAnimation (與該示例的不同之處在於我只想渲染我的圈子而沒有按下按鈕)。
但是當我添加了LayoutAnimation時,它就是整個視圖/屏幕/組件,它可以完成“彈入”的動畫,而不僅僅是我想要的圓圈 。 我必須在哪里移動LayoutAnimation才能實現動畫的圓形對象?
再次注意 :注意bennygenel
建議制作一個單獨的Circles組件,然后在Favorites上,有一個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>
);
}
}
來自configureNext()
docs;
static configureNext(config, onAnimationDidEnd?)
計划在下一個布局上發生動畫。
這意味着您需要在渲染要設置動畫的組件之前配置LayoutAnimation
。 如果您將Circle
組件分開並為該組件設置LayoutAnimation
, 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>
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.