js实现的react-native选择器,支持组件调用,静态方法调用
yarn add react-native-repicker react-native-linear-gradient react-native-reanimated react-native-gesture-handler
npm install react-native-repicker react-native-linear-gradient react-native-reanimated react-native-gesture-handler --save
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;
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);
用于选择器的数据;
选中某一条数据时触发;
指定选中某一条数据的下标;
选择器中的行高, 默认为 36;
可见区域内,展示几行,应该大于等于3,并且是单数,默认为 7;
文字字号,默认为 16;
文字颜色,默认为 #333;
细横线的颜色,默认为 #666;
遮罩的颜色, 默认为 #fff;
以下需要 useColorScheme Api 的支持
暗黑模式下, 文字的颜色, 默认为 #eee;
暗黑模式下, 细横线的颜色,默认为 #ccc;
暗黑模式下, 遮罩的颜色, 默认为 #000;
- 如果 children 传入了一个子组件,就会启用模态框
- children 组件应该实现了 onPress
取消按钮显示的文字
点击取消按钮调用的回调
确定按钮显示的文字
点击确定按钮调用的回调
确定按钮高亮的颜色,默认为 #1073ea
选择器的标题,显示在顶部中间
以下需要 useColorScheme Api 的支持
暗黑模式下确定按钮高亮的颜色,默认为 #1161c1