推荐使用:React Native Smooth Picker —— 滑动选择器组件
React Native Smooth Picker 是一个为 React Native 应用程序提供的自定义滑动选择器组件。以下是如何使用它的示例代码:
首先,你需要安装这个库:
npm install react-native-smooth-picker
然后,你可以在你的 React Native 代码中引入并使用它:
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Picker from 'react-native-smooth-picker';
const App = () => {
const [selectedValue, setSelectedValue] = useState('');
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Picker
onValueChange={value => setSelectedValue(value)}
selectedValue={selectedValue}
>
<Picker.Item label="Item 1" value="item1" />
<Picker.Item label="Item 2" value="item2" />
<Picker.Item label="Item 3" value="item3" />
{/* 更多 Picker.Item 根据需求添加 */}
</Picker>
<Text>Selected: {selectedValue}</Text>
</View>
);
};
export default App;
在这个例子中,Picker
组件被用来创建一个可滑动的选择器,并且当用户选择一个不同的项时,onValueChange
回调会被触发,并且 selectedValue
状态会被更新。<Picker.Item>
是用来定义每一个可滑动选项的。
评论已关闭