react-native-ceiling v1.0.1

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

Radio

License

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