react-native-pbb v0.0.38

react-native-components

RN 组件库

安装

$ yarn add react-native-components $ cd ios && pod install

组件

import { Alert,Button,... } from "react-native-components";

<Alert />
<Button />
<Card />
<Cascade />
<Container />
<Context />
<Drawer />
<Empty />
<Fade />
<FadeImage />
<Form />
<GradientButton />
<Icon />
<ListView />
<Loading />
<NavigationBar />
<PageControl />
<PickCard />
<SearchBar />
<Segment />
<StatusBar />
<TabBar />

样式

import { cs } from "react-native-components";

//内置样式,如下,x1表示4*1,且经过缩放
//缩写规则为单词首字母拼写,下划线_后面跟的是值

cs.mt_x1 //{ marginTop:scale(4) }
cs.pt_x2 //{ paddingTop:scale(4)*2 }
cs.fd_r //{ flexDirection:'row' }
cs.ai_c //{ alignItems:'row' }

//使用如下，好处在于不再需要为每个组件创建样式名称。
//但不利于阅读，需要熟悉
<Button style={[cs.mt_x1,cs.pt_x2,cs.fd_r]}
...

主题 provider

import { ThemeProvider ,useThemeAwareObject,Theme } from "react-native-components";

//推款和选款配置
<ThemeProvider initial={ThemeVogue}>
  <Navigation />
</ThemeProvider>

//受主题色影响的组件如下获得主题色并配置颜色
const createStyle =(theme:Theme)=>{
  const styles =StyleSheet.Create({
   button:{
     color:theme.color
  })
}

//然后再组件中是用hook创建style
const styles = useThemeAwareObject(createStyle)

权限 provider

import { PermissionProvider ,Permission } from "react-native-components";

//App.tsx
<PermissionProvider permissions={['1100','1101']}>
  <Navigation />
</PermissionProvider>


//需要权限控制的组件
<Permission permissionId='1100'>
 <Button />
</>

颜色

import { Color } from "react-native-components";

Color.primary
Color.normal
Color.secondary
Color.unimportance
Color.separator
Color.background
...