[英]How to make a custom Radio Button with animation? React Native
I've made a custom Radio Button in React Native.我在 React Native 中制作了一个自定义的单选按钮。 Below is the link to my code.下面是我的代码的链接。
https://gist.github.com/shubh007-dev/0d8a0ca4d6f7d1530f3e28d223f9199e https://gist.github.com/shubh007-dev/0d8a0ca4d6f7d1530f3e28d223f9199e
What I want is to animate the radio button when I press it, like it's done in this library - https://www.npmjs.com/package/react-native-simple-radio-button我想要的是在按下单选按钮时为其设置动画,就像在这个库中所做的一样 - https://www.npmjs.com/package/react-native-simple-radio-button
I'm able to animate my radio button for the first time but when I press another radio button, animation doesn't happen.我第一次能够为我的单选按钮设置动画,但是当我按下另一个单选按钮时,动画不会发生。
(Another approach for this question) How can I make sure that the Animated value is different for each Radio Button? (此问题的另一种方法)如何确保每个单选按钮的动画值都不同?
You either have to make a custom component for the radio or use x animated variable for x radio buttons.您要么必须为收音机制作自定义组件,要么为 x 单选按钮使用 x 动画变量。
Now, making x variable for x buttons is not an efficient solution but it could be used if you got only a few buttons.现在,为 x 按钮设置 x 变量并不是一个有效的解决方案,但如果您只有几个按钮,则可以使用它。
You made a custom component which renders a flatlist and that's the problem;您制作了一个呈现平面列表的自定义组件,这就是问题所在; can't animate buttons separately in the same component you use to render them.不能在用于渲染它们的同一组件中单独为按钮设置动画。
You should split your code and make the radio button a component itself.您应该拆分代码并使单选按钮本身成为一个组件。 Something like that (didn't test it, but that way it should work) :类似的东西(没有测试它,但它应该可以工作):
export class RadioButton extends Component {
constructor(props) {
super(props);
this.state = {
radioSelected: this.props.selectedItemId,
};
}
radioClick = id => {
this.setState({ radioSelected: id });
this.props.onChange(id);
}
renderRadioButton = item => {
const { radioSelected } = this.state;
const { labelLeftStyle, labelRightStyle, labelOnRight } = this.props;
return (
<AnimatedRadio
{...item}
isSelected={item.id === radioSelected}
labelLeftStyle={labelLeftStyle}
labelRightStyle={labelRightStyle}
labelOnRight={labelOnRight}
radioClick={this.radioClick}
/>
);
};
render() {
return (
<FlatList
data={this.props.radioOptions}
extraData={this.state}
renderItem={({ item }) => this.renderRadioButton(item)}
keyExtractor={(item, index) => index.toString()}
/>
);
}
}
export class AnimatedRadio extends Component {
springValue = new Animated.Value(1.1);
onRadioClick = id => () => {
const { radioClick } = this.props;
radioClick(id);
this.spring();
};
spring = () => {
Animated.spring(this.springValue, {
toValue: 0.95,
friction: 2,
tension: 15,
}).start();
};
render() {
const {
id,
label,
labelLeftStyle,
labelRightStyle,
labelOnRight,
isSelected,
} = this.props;
return (
<View key={id} style={STYLES.radioContainerView}>
<TouchableOpacity
style={STYLES.radioButtonDirectionStyle}
onPress={this.onRadioClick(id)}
>
{labelOnLeft == true ? (
<Text style={[labelLeftStyle]}>{label}</Text>
) : null}
<View
style={[isSelected ? STYLES.selectedView : STYLES.unselectedView]}
>
{isSelected ? (
<Animated.View
style={[
STYLES.radioSelected,
{ transform: [{ scale: this.springValue }] },
]}
/>
) : null}
</View>
{labelOnRight == true ? (
<Text style={[labelRightStyle]}>{label}</Text>
) : null}
</TouchableOpacity>
</View>
);
}
}
This way each component radio will have its own animated value, and won't interfere with others buttons.这样每个组件收音机都有自己的动画值,并且不会干扰其他按钮。
I did it using LayoutAnimation
like below.我使用LayoutAnimation
如下所示。
LayoutAnimation.configureNext({
duration: 300,
create: {
type: 'linear',
property: 'scaleXY',
},
update: {
type: 'spring',
springDamping: 0.4,
property: 'opacity',
},
delete: {
type: 'easeOut',
property: 'opacity',
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.