0.0.4 • Published 5 years ago
rn_mint v0.0.4
搭建react-native 组件库
搭建组件库用typescript 进行编写
- 搭建react-native + typescript
- 安装storybook 进行调试
- 发布到npm 然后进行进行使用
搭建基础环境
1. 搭建基础项目
react-native init rnDemo
cd MyProject rnDemo
2. 安装typescript 依赖
yarn add tslib @types/react @types/react-native
yarn add --dev react-native-typescript-transformer typescript
3. tsconfig.json
{
"compilerOptions": {
"importHelpers": true,
"target": "es2015",
"jsx": "react",
"noEmit": true,
"moduleResolution": "node"
},
"exclude": [
"node_modules"
]
}
4. 新建 rn-cli.config.js
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
}
}
- 基础react + typescript 搭建完成
- 开始集成 storybook
---
5. 进入项目中安装 storybook
npx -p @storybook/cli sb init
6. 修改更目录下的 App.js
import StorybookUI from './storybook';
module.exports = StorybookUI
7. 开始跑项目
react-native run-ios/android
npm run storybook
ps. 如果跑项目失败,删除你的node_modules 重新安装 (包与包之间的依赖关系)
新建基础组件并且调试
storybook/stories/input
import React from 'react'
import { View , TextInput, Text , StyleSheet } from 'react-native'
interface Iprops{
title ?: string
changeVals ?:(v:any) => void
}
class BaseInput extends React.Component<Iprops>{
render(){
return (
<View style={styles.center_box}>
<View style={styles.base_text}><Text style={styles.title}>{this.props.title}</Text></View>
<View style={styles.base_ipt}><TextInput style={styles.ipt} onChangeText={this.changeVals}/></View>
</View>
)
}
changeVals = (e) =>{
this.props.changeVals(e)
}
}
const styles = StyleSheet.create({
center_box:{
flex: 1,
alignItems: 'center',
backgroundColor: '#F5FCFF',
flexDirection:'row'
},
base_ipt:{
borderColor:"#fef",
height:30,
marginLeft:10,
marginRight:16,
flex:1,
},
base_text:{
height:30,
marginLeft:16,
},
ipt:{
borderColor:"#Fa0",
borderBottomWidth:1,
height:30,
paddingLeft:10,
},
title:{
lineHeight:30,
}
})
export default BaseInput
stories/index.js
import React from 'react';
import { Text } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
// eslint-disable-next-line import/extensions
import Button from './Button';
import CenterView from './CenterView';
import BaseInput from './Input'
storiesOf('input',module).add('基础niput',()=><BaseInput title={"getnamewwww"} changeVals={action('get-ipt-value')}/>)
storiesOf('Button', module)
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
.add('with text', () => (
<Button onPress={action('clicked-text')}>
<Text>Hello Button</Text>
</Button>
))
.add('with some emoji', () => (
<Button onPress={action('clicked-emoji')}>
<Text>😀 😎 👍 💯</Text>
</Button>
));
发布你的react-native组件库
stories新建 root.ts 作为对外暴露文件
import BaseIpt from "./Input"
export default {
BaseIpt
}
package.json
{
"name": "rn_mint",
"version": "0.0.2",
"main": "lib/root.ts", // 指定对外暴露文件
"publisher":"onion_running",
"Private":false,
"scripts": {
"start": "react-native start",
"test": "jest",
"lint": "eslint .",
"storybook": "start-storybook -p 7007"
},
"dependencies": {
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@react-native-community/eslint-config": "^0.0.5",
"@storybook/addon-actions": "^5.1.11",
"@storybook/addon-links": "^5.1.11",
"@storybook/addons": "^5.1.11",
"@storybook/react-native": "^5.1.11",
"@storybook/react-native-server": "^5.1.11",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"eslint": "^6.3.0",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-dom": "16.8.6",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "16.8.6",
"typescript": "^3.6.2",
"@types/react": "^16.9.2",
"@types/react-native": "^0.60.11",
"react": "16.8.6",
"react-native": "0.60.5",
"tslib": "^1.10.0"
},
"jest": {
"preset": "react-native"
}
}
// 注意 dependencies 不要有依赖配置 否则会出现引包错乱的问题
2. 添加对外暴露文件文件 build.sh
rm -rf lib
cd storybook
cp -r stories ../lib
3. 发布
npm login
npm publish
发布的时候遇到的问题
1. 发布失败 没有忽略文件中的大文件
2. 发布时需要更改镜像源
项目中使用
ps. 在未集成原生模块之前采用: npm i rn_mint 直接使用
react-native 中直接引用
import React from 'react'
import T from 'rn_mint'
const Ipt = T.BaseIpt
function Temp(){
const getvals = (e) =>{
alert(e)
}
return <Ipt title='name' changeVals={getvals}/>
}
export default Temp
ps. 由于本项目目前是有typescript编写, 暂时没有处理转译js ,所以js中引用会出现报错。目前只支持 rn项目typescript版本
roadmap:
优化
- 支持js 引用
- 引用方式优化
基础react-native 组件
- input 组件
- toast 组件
...
原生模块组件(同时支持 android/ios)
- 调用相机
- 扫描二维码
- 调取图库 ...
ps. ios 端支持 pod 和 link 方式