react-native-ceiling

安装

$ npm install react-native-ceiling --save

Usage

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即该数组的下标|

Radio

|参数|类型|必要|作用| |:---:|:---:|---|---| |data|T[]|是|选项数据| |renderSelectedItem|JSX.Element|是|选中展示| |renderUnSelectItem|JSX.Element|是|未选中展示| |initSelectIndex|number|否|默认选择下标| |onSelect|(item: T, index: number) => void|否|选中回调| |extractKey|(item: T) => string|否|提取key值|

License

The files included in this repository are licensed under the MIT license.