更改活动状态和弹性过渡
Change active state and flex transition
我有一个 React 组件 class 如下所示
<View style={{flex: 1}}>
<TouchableOpacity style={styles.FreeCoffee}/>
<TouchableOpacity style={styles.Help}/>
</View>
两个 touchableopacity 组件都具有 flex 2 的值,因此它们在 window 中平分。当按下其中一个 touchableopacity 时,我想在 flex 到 2 到 4 之间进行过渡,以便一个盒子可以随着动画增长,并将其标记为 "active" 或 "selected" 一个。我已经搜索了很多次,但由于我是 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) {
}
}
您可以使用 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>
);
}
}
我有一个 React 组件 class 如下所示
<View style={{flex: 1}}>
<TouchableOpacity style={styles.FreeCoffee}/>
<TouchableOpacity style={styles.Help}/>
</View>
两个 touchableopacity 组件都具有 flex 2 的值,因此它们在 window 中平分。当按下其中一个 touchableopacity 时,我想在 flex 到 2 到 4 之间进行过渡,以便一个盒子可以随着动画增长,并将其标记为 "active" 或 "selected" 一个。我已经搜索了很多次,但由于我是 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) {
}
}
您可以使用 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>
);
}
}