3.0.0 • Published 2 years ago
react-native-repicker v3.0.0
react-native-repicker
js实现的react-native选择器,支持组件调用,静态方法调用
安装
yarn
yarn add react-native-repicker react-native-linear-gradient react-native-reanimated react-native-gesture-handler
npm
npm install react-native-repicker react-native-linear-gradient react-native-reanimated react-native-gesture-handler --save
PickerView 示例
import React from 'react';
import { View, Text } from 'react-native';
import { DarklyText } from 'rn-darkly';
import { Picker } from 'react-native-repicker';
const App = () => {
const [selected, setSelected] = React.useState(50);
const [count, setCount] = React.useState(100);
const data = React.useMemo(() => {
return new Array(count)
.fill(0)
.map((v, i) => ({ value: i, label: i + 'label' }));
}, [count]);
return (
<>
<View style={{ paddingTop: 200 }}>
<Picker
selected={selected}
onChange={setSelected}
data={data}
/>
</View>
<Text
onPress={() => {
const count = Math.floor(Math.random() * 100);
// setCount(count);
setSelected(count);
}}
style={{ fontSize: 30 }}>
change
</Text>
</>
);
};
export default App;
Picker Modal 示例
import React from 'react';
import { View, Text } from 'react-native';
import { DarklyText } from 'rn-darkly';
import { Picker } from 'react-native-repicker';
const App = () => {
const [selected, setSelected] = React.useState(50);
const [count, setCount] = React.useState(100);
const data = React.useMemo(() => {
return new Array(count)
.fill(0)
.map((v, i) => ({ value: i, label: i + 'label' }));
}, [count]);
return (
<>
<View style={{ paddingTop: 200 }}>
<Picker
title="请选择"
selected={selected}
onChange={setSelected}
data={data}>
<DarklyText style={{ color: '#333' }} dark_style={{ color: '#ccc' }}>
open
</DarklyText>
</Picker>
</View>
<Text
onPress={() => {
const count = Math.floor(Math.random() * 100);
// setCount(count);
setSelected(count);
}}
style={{ fontSize: 30 }}>
change
</Text>
</>
);
};
export default App;
静态方法调用
// 显示
const key = Picker.show({
// maskCloseable: false,
data: new Array(count)
.fill(0)
.map((v, i) => ({ value: i, label: i + 'label' })),
title: '请选择',
selected: 0,
onSelected: console.log,
onConfirm(e) {
e.preventDefault();
},
});
// 更新
Picker.update(key, {
selected: 10
});
// 关闭
Picker.hide(key);
Props
PickerView
data: {value: string | number, label: string | number}[];
用于选择器的数据;
onChange?: (selected: number) => void;
选中某一条数据时触发;
selected?: number;
指定选中某一条数据的下标;
itemHeight?: number;
选择器中的行高, 默认为 36;
itemTotal?: number;
可见区域内,展示几行,应该大于等于3,并且是单数,默认为 7;
itemFontSize?: number;
文字字号,默认为 16;
itemColor?: string;
文字颜色,默认为 #333;
indicatorColor?: string;
细横线的颜色,默认为 #666;
overlayColor?: string;
遮罩的颜色, 默认为 #fff;
以下需要 useColorScheme Api 的支持
dark_itemColor?: string;
暗黑模式下, 文字的颜色, 默认为 #eee;
dark_indicatorColor?: string;
暗黑模式下, 细横线的颜色,默认为 #ccc;
dark_overlayColor?: string;
暗黑模式下, 遮罩的颜色, 默认为 #000;
Picker Modal
children?: React.ReactElement
- 如果 children 传入了一个子组件,就会启用模态框
- children 组件应该实现了 onPress
cancelText?: string;
取消按钮显示的文字
onCancel?: () => void;
点击取消按钮调用的回调
confirmText?: string;
确定按钮显示的文字
onConfirm?: () => void;
点击确定按钮调用的回调
tintColor?: string;
确定按钮高亮的颜色,默认为 #1073ea
title?: string;
选择器的标题,显示在顶部中间
以下需要 useColorScheme Api 的支持
dark_tintColor?: string
暗黑模式下确定按钮高亮的颜色,默认为 #1161c1
3.0.0-beta1
2 years ago
3.0.0-beta3
2 years ago
3.0.0-beta2
2 years ago
2.1.2
2 years ago
2.0.3
2 years ago
2.0.2
2 years ago
2.0.5
2 years ago
2.0.4
2 years ago
2.0.7
2 years ago
2.0.6
2 years ago
2.0.9
2 years ago
2.0.8
2 years ago
2.1.0
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
3.0.0
2 years ago
1.1.0
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0-beta3
3 years ago
1.0.0-beta2
3 years ago
1.0.0-beta1
3 years ago