**React Native 简易步进器:轻松实现iOS风格的UIStepper**
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
const Stepper = ({ value, onChange }) => {
const [currentValue, setCurrentValue] = useState(value);
const increment = () => {
const newValue = currentValue + 1;
setCurrentValue(newValue);
onChange(newValue);
};
const decrement = () => {
const newValue = currentValue - 1;
setCurrentValue(newValue);
onChange(newValue);
};
return (
<View style={styles.container}>
<Text onPress={decrement}>-</Text>
<Text>{currentValue}</Text>
<Text onPress={increment}>+</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignItems: 'center',
},
text: {
paddingHorizontal: 16,
paddingVertical: 10,
},
});
export default Stepper;
这段代码实现了一个简易的步进器组件,可以通过点击加号或减号来增加或减少数值,并且将新的数值传递给父组件。使用React Hook useState
来管理组件内部的状态,这是React Native开发中推荐的方式。
评论已关闭