import React from 'react' ; import { Tab , Tabs , Text , View } from 'native-base' ; import { ScrollView , StyleSheet , TouchableOpacity } from 'react-native' ; import { Actions } from 'react-native-router-flux' ; import PageContainer from '../../components/PageContainer' ; import Avatar from '../../components/Avatar' ; type Props = { groups : { _id : string ; name : string ; avatar : string ; members : number ; } [ ] ; users : { _id : string ; username : string ; avatar : string ; } [ ] ; } ; function SearchResult ( { groups , users } ) { function handleClickGroup ( group ) { Actions . push ( 'groupInfo' , { group } ) ; } function handleClickUser ( user ) { Actions . push ( 'userInfo' , { user } ) ; } return ( < PageContainer disableSafeAreaView > < Tabs style = { styles . container } tabContainerStyle = { { backgroundColor : 'transparent' } } > < Tab heading = { `群组(${ groups . length })` } tabStyle = { { backgroundColor : 'transparent' } } activeTabStyle = { { backgroundColor : 'transparent' } } > < PageContainer > < ScrollView > { groups . map ( ( group ) => ( < TouchableOpacity key = { group . _id } onPress = { ( ) => handleClickGroup ( group ) } > < View style = { styles . item } > < Avatar src = { group . avatar } size = { 40 } / > < View style = { styles . groupInfo } > < Text style = { styles . groupName } > { group . name } < /Text> < Text style = { styles . groupMembers } > { group . members } 人 < /Text> < /View> < /View> < /TouchableOpacity>))} < /ScrollView> < /PageContainer> < /Tab> < Tab heading = { `用户(${ users . length })` } tabStyle = { { backgroundColor : 'transparent' } } activeTabStyle = { { backgroundColor : 'transparent' } } > < PageContainer > < ScrollView > { users . map ( ( user ) => ( < TouchableOpacity key = { user . _id } onPress = { ( ) => handleClickUser ( user ) } > < View style = { styles . item } > < Avatar src = { user . avatar } size = { 40 } / > < Text style = { styles . username } > { user . username } < /Text> < /View> < /TouchableOpacity>))} < /ScrollView> < /PageContainer> < /Tab> < /Tabs> < /PageContainer>); } export default SearchResult ; const styles = StyleSheet . create ( { container : { backgroundColor : 'transparent' , } , item : { height : 56 , flexDirection : 'row' , alignItems : 'center' , paddingLeft : 16 , paddingRight : 16 , } , groupInfo : { marginLeft : 8 , } , groupName : { color : '#444' , } , groupMembers : { fontSize : 14 , color : '#888' , marginTop : 1 , } , username : { color : '#444' , marginLeft : 8 , } , } ) ;