npm 包 @johnnylc/rn-custom-ui-components 使用教程

简介

@johnnylc/rn-custom-ui-components 是一款基于 React Native 的自定义 UI 组件库。这个库包含了一些常用的控件，如：按钮、输入框等，并且都可以根据需要进行自定义样式。

安装

可以通过 npm 来安装该组件库:

npm install @johnnylc/rn-custom-ui-components --save

用法

引入组件

import {Button, Input} from '@johnnylc/rn-custom-ui-components';

Button

<Button
  title="保存"
  onPress={() => console.log('保存')}
  containerStyle={{marginTop: 20}} // 按钮容器样式
  buttonStyle={{backgroundColor: 'green', borderRadius: 5}} // 按钮样式
  titleStyle={{color: 'white'}} // 文字样式
/>

Input

<Input
  placeholder="请输入密码"
  secureTextEntry={true} // 是否是密码输入
  onChangeText={(text) => console.log(text)}
  containerStyle={{marginTop: 20}} // 输入框容器样式
  inputStyle={{borderBottomWidth: 1}} // 输入框样式
/>

总结

@johnnylc/rn-custom-ui-components 是一款优秀的自定义 UI 组件库，具有良好的可定制性和易用性。在 React Native 开发中，我们可以轻松地引用这些组件，大大提高了开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100313