Address Book library for React Native
![企业微信截图_95ebcc99-0a35-4d36-b8e6-dc9a36be1d00](https://private-user-images.githubusercontent.com/18210575/270342160-1f433589-c243-4b18-94fb-5d21c7beea91.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE4NDg3NTUsIm5iZiI6MTcyMTg0ODQ1NSwicGF0aCI6Ii8xODIxMDU3NS8yNzAzNDIxNjAtMWY0MzM1ODktYzI0My00YjE4LTk0ZmItNWQyMWM3YmVlYTkxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzI0VDE5MTQxNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThiYjIyMDg5OTg5N2JkNmEzYTc2OTEzYTI0MGEyNmU1Nzg5Njg4Nzk4NGVhNDBkN2ZhMWRkNjkyYzZmNTFhYjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rmOGGP3iFcHNvFNF1BI7gAdivYIs_CoxCuGolg8UkOk)
install the npm package:
npm install react-native-sectionlist-contacts --save
or
yarn add react-native-sectionlist-contacts
import React from 'react';
import {
SafeAreaView,
StyleSheet,
View,
} from 'react-native';
import SectionListModule from 'react-native-sectionlist-contacts'
function App(): JSX.Element {
//name is required and other params such as id is optional
const nameData=[
{name:'阿玛尼',id:'amani',params: ''},
{name:'OK',id:'ok',params: '123'},
{name:'天津饭'},
{name:'%……&'},
{name:'周星驰'},
{name:'习大表哥'},
{name:'不要这样'},
{name:'V字仇杀队'},
{name:'拼车'},
{name:'他妈跌'},
{name:'淫僧'},
{name:'钱学森'},
{name:'宁采臣'},
{name:'史泰龙'},
{name:'恐龙'},
{name:'任达华'},
{name:'妈咪宝贝'},
{name:'ing'},
{name:'康麦隆'},
{name:'刘德华'},
{name:'精忠报国'},
{name:'黄药师'},
{name:'大叔皮'},
{name:'布达拉宫'},
{name:'方世玉'},
{name:'ET外星人'},
{name:'程咬金'},
{name:'**&&&&'},
]
return (
<SafeAreaView style={styles.container}>
<View style={styles.container}>
<SectionListModule
sectionListData={nameData}
sectionHeight={50}
sectionHeaderHeight={25}
initialNumToRender={nameData.length}
showsVerticalScrollIndicator={false}
highlightAlphabetColor={'blue'}
showHighlightAlphabetColor={true}
SectionListClickCallback={(item,index,section) => {
console.log('---SectionListClickCallback--:',item,index)
}}
otherAlphabet="#"
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
- sectionListData (Array) required- data to display
- sectionHeight (Integer) optional- height of the section item (Default: 50)
- sectionHeaderHeight (Integer) optional- height of the section header (Default: 25)
- initialNumToRender (Integer) optional- initial num of item to render
- showAlphabet (Bool)optional - When false, Alphabet will not be displayed , default is true
- SectionListClickCallback (Function(item, index)) optional- Callback when each item is pressed
- sectionHeaderTextStyle (Text.propTypes.style) optional- style of the section header text
- sectionItemViewStyle (View.propTypes.style) optional- style of the section item View
- sectionItemTextStyle (Text.propTypes.style) optional- style of the section item text
- letterViewStyle (View.propTypes.style) optional- style of right alphabet view
- letterTextStyle (Text.propTypes.style) optional- style of right alphabet text
- scrollAnimation (Bool)optional - (Default: false)
- highlightAlphabetColor (String)optional - (Default: 'blue')
- showHighlightAlphabetColor (Bool)optional - (Default: true)
- viewPosition (Integer)optional (0, 0.5, 1) - (Default: 0)
- renderHeader(Function:ReactComponent) optional- Custom header component, accept 1 argument props and should return a component to use as the header.
- renderItem (Function:ReactComponent) optional- Custom section item component,accept 2 argument props and should return a component to use as the ssction item.
- otherAlphabet (String) optional- the other alphabet
If you want to custom header,you can do like this:
render(){
<SectionListContacts
...
renderHeader={this._renderHeader}
/>
}
_renderHeader=(params)=>{
console.log('---custom-renderHeader--',params)
return <View><Text>{params.key}</Text></View>
}
If you want to custom section item,you can do like this:
render(){
<SectionListContacts
...
renderItem={this._renderItem}
/>
}
renderItem=(item,index,section)=>{
console.log('---custom-renderItem--',item,index,section)
return <View><Text>{item.name}</Text></View>
}
Issues and contributions are very welcome: bug fixes, features, documentation.