**React Native 简易步进器:轻松实现iOS风格的UIStepper**
    		       		warning:
    		            这篇文章距离上次修改已过444天,其中的内容可能已经有所变动。
    		        
        		                
                
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开发中推荐的方式。
评论已关闭