推荐一款React Native必备组件:`react-native-segmented-control-tab`
react-native-segmented-control-tab
是一个用于 React Native 应用程序的分段控制组件,它允许用户在几个选项之间进行选择。以下是如何使用该组件的示例代码:
首先,你需要安装这个包:
npm install react-native-segmented-control-tab
然后,你可以在你的 React Native 代码中导入并使用这个组件:
import React, { useState } from 'react';
import SegmentedControlTab from 'react-native-segmented-control-tab';
const MyComponent = () => {
const [selectedIndex, setSelectedIndex] = useState(0);
const onChange = (index) => {
setSelectedIndex(index);
};
return (
<SegmentedControlTab
values={['First', 'Second', 'Third']}
selectedIndex={selectedIndex}
onTabPress={onChange}
/>
);
};
export default MyComponent;
在这个例子中,我们创建了一个分段控制组件,它有三个选项,并且使用 useState
钩子来跟踪当前选中的选项索引。当用户点击一个选项时,onTabPress
回调函数会更新选中的索引,并重新渲染组件以反映新的选中状态。
评论已关闭