一个具有吸顶效果、tab可切换的纯RN组件
$ npm install react-native-ceiling --save
import {Ceiling,Radio} from 'react-native-ceiling'; <Ceiling ListHeaderComponent={ <View style={styles.header}> <Text>首部内容</Text> </View> } TabsClass={ // 该Class实例化的Element，需支持必要props项: onSwitch函数，调用即可切换为相应下标的待切换页面 class extends Component<{ onSwitch: (page: number) => void }> { render() { return ( <View style={styles.tabs}> <Radio data={["普通内容A","列表B","列表C"]} initSelectIndex={0} renderSelectedItem={item => <Text style={styles.tabSelected}>{item}</Text>} renderUnSelectItem={item => <Text style={styles.tabUnselect}>{item}</Text>} onSelect={(item, index) => { this.props.onSwitch(index); }} extractKey={item => item} /> </View> ); } } } views={[ <View style={styles.normalContentC}> <Text>普通内容A</Text> </View> , <FlatList listKey={"list1"} data={ Array(100).fill().map((value, index) => `列表B - 第${index+1}行`) } renderItem={({item}) => <Text>{item}</Text>} keyExtractor={item => item} /> , <FlatList listKey={"list2"} data={ Array(150).fill().map((value, index) => `列表C - 第${index+1}行`) } renderItem={({item}) => <Text>{item}</Text>} keyExtractor={item => item} /> ]} > </Ceiling> 组件文档 Ceiling
| 参数 | 类型 | 必要 | 作用 |
|---|---|---|---|
| ListHeaderComponent | JSX.Element | 是 | 首部内容组件 |
| TabsClass | Component<{ onSwitch : (page:number)=>void }> | 是 | Tab栏组件类 |
| views | JSX.Element[] | 是 | onSwitch的page即该数组的下标 |
| 参数 | 类型 | 必要 | 作用 |
|---|---|---|---|
| data | T[] | 是 | 选项数据 |
| renderSelectedItem | JSX.Element | 是 | 选中展示 |
| renderUnSelectItem | JSX.Element | 是 | 未选中展示 |
| initSelectIndex | number | 否 | 默认选择下标 |
| onSelect | (item: T, index: number) => void | 否 | 选中回调 |
| extractKey | (item: T) => string | 否 | 提取key值 |
The files included in this repository are licensed under the MIT license.
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
