反应原生微调器 - Javascript

简介

反应原生微调器是一款基于React的微调器组件。它提供了一个简单的界面来增加或减少数字值。

功能特点

• 响应式设计，可与React集成。
• 提供最大值和最小值的限制。
• 可自定义步长。
• 可自定义样式。

安装

通过npm安装：

npm install react-native-stepper --save

使用方法

import React, { useState } from 'react';
import Stepper from 'react-native-stepper';

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <Stepper
      value={value}
      onValueChange={(value) => setValue(value)}
      minimumValue={0}
      maximumValue={10}
      step={1}
    />
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | value | number | | 当前值 | | onValueChange | function | | 当值改变时的回调函数 | | minimumValue | number | 0 | 最小值 | | maximumValue | number | 10 | 最大值 | | step | number | 1 | 增加或减少的步长 | | style | object | | 样式对象 | | textStyle | object | | 文字的样式对象 |

样式

| 字段 | 类型 | 描述 | | ---- | ---- | --- | | container | object | 容器的样式 | | buttonContainer | object | 按钮的容器样式 | | buttonText | object | 按钮文字的样式 |

示例

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Stepper from 'react-native-stepper';

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Value: {value}</Text>
      <Stepper
        value={value}
        onValueChange={(value) => setValue(value)}
        minimumValue={0}
        maximumValue={10}
        step={1}
        style={styles.stepper}
        textStyle={styles.textStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
  stepper: {
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  textStyle: {
    color: '#666666',
    fontSize: 24,
  },
});

export default App;

返回的markdown格式如下：

反应原生微调器 - Javascript

简介

反应原生微调器是一款基于React的微调器组件。它提供了一个简单的界面来增加或减少数字值。

功能特点

• 响应式设计，可与React集成。
• 提供最大值和最小值的限制。
• 可自定义步长。
• 可自定义样式。

安装

通过npm安装：

npm install react-native-stepper --save

使用方法

import React, { useState } from 'react';
import Stepper from 'react-native-stepper';

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <Stepper
      value={value}
      onValueChange={(value) => setValue(value)}
      minimumValue={0}
      maximumValue={10}
      step={1}
    />
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ------------ | -------- | ------- | ----------------------------- | | value | number | | 当前值 | | onValueChange | function | | 当值改变时的回调函数 | | minimumValue | number | 0 | 最小值 | | maximumValue | number | 10 | 最大值 | | step | number | 1 | 增加或减少的步长 | | style | object | | 样式对象 | | textStyle | object | | 文字的样式对象 |

样式

| 字段 | 类型 | 描述 | | -------------- | ------ | ------- | | container | object | 容器的样式 | | buttonContainer | object | 按钮的容器样式 | | buttonText | object | 按钮文字的样式 |

示例

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Stepper from 'react-native-stepper';

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Value: {value}</Text>
      <Stepper
        value={value}
        onValueChange={(value) => setValue(value)}
        minimumValue={0}
        maximumValue={10}
        step={1}
        style={styles.stepper}
        textStyle={styles.textStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
  stepper: {
    backgroundColor: '#F5FCFF',
    flexDirection: 'row',
  },
  textStyle: {
    color: '#666666',
    fontSize: 24,
  },
});

export default App;