react-native-freedomen
v0.3.6
Published
react native ui
Downloads
14
Maintainers
Readme
文档地址
简介
它并不是主打样式的框架,主作开发,提供开发策略,可以定义样式标签
react-native-freedomen 是能够大副度提升你的开发效率的框架, 样式需要简单自定义
它能够实现只渲染必要的dom渲染,而不必你去计算,大幅提升流畅度
它不需要外接redux 就可以组件相互通信
它不需要你重复的定义变量
大幅度加大开发效率
组件数据化,没有多个组件传参问题,统一结构的写法,大幅提高可维护性,扩展性
轻松组装组件
...
安装
npm i react-native-freedomen
或
yarn add react-native-freedomen
引用
import Freedomen from 'react-native-freedomen'
自定义主题
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import Freedomen from 'react-native-freedomen'
Freedomen.custom({ //色彩
primaryColor: '#409EFF', //主色
optionColor: '#191919', //有options 属性的label颜色
placeholder: '#999' //有placeholder 的颜色
},{//大小
primarySize: 16, //主字体大小
itemSpace: 15, //options 间距
largeHeight: 42,
normalHeight: 35, //正常尺寸的高度
smallHeight: 30
},{//自定义样式
'text-badge': {...}, //使用 {type: 'text-badge'}
'button-login': {...}, //使用 {type: 'button-login'}
'button-image-icon': {...}
...
})
AppRegistry.registerComponent(appName, () => App);
DEMO
demo1. 只渲染有必要的Dom
你可以把成吨的元素放到Region里面,然后使用setState来更新render 函数, Region也可以保证只渲染需要的dom, 就如下列,slider就是处罚频率极高的组件,在高频率的事件中调用setState 仍然可以非常流畅的执行,因为只更新需要更新的dom.所以你可以放心的放入成吨的dom后,高频率的使用setState方法, 也仍然可以保证流畅性
render() {
return (
<ScrollView>
<Freedomen.Region
style={{padding: 10}}
event={params => {
if (params.prop == 'slider') {
let row = params.row
row.slit = parseInt(params.value * 100) + '%'
return row //或者 this.setState({data: row})
}
}}
columns={[
{type: 'slider', value: .2, prop: 'slider', style: {padding: 5}},
{type: 'text', value: '2%', prop: 'slit'},
{type: 'progress', value: .9, prop: 'progress', style: {width: 420, padding: 5}},
{type: 'pickdate', placeholder: '请选择时间', prop: 'pickdate', style: {padding: 5}},
[
{type: 'checkbox', prop: 'checkbox', value: false, style: {padding: 5} },
{type: 'radio', prop: 'radio', value: false, style: {borderRadius: 40, padding: 5} },
{type: 'text-badge', value: 8, prop: 'badge1'},
{type: 'text-badge', value: 1, filter: value => {return value> 99 ? '99+': value}, prop: 'badge2'},
{type: 'switch', value: false, prop: 'switch'},
{type: 'text', value: '标签', prop: 'biaoqian', style: {padding: 2, color: '#FF4949', borderColor: '#FF4949', borderWidth: 1}},
{type: 'button-text', value: '按钮', style: { margin: 5, padding: 10, paddingLR: 15, backgroundColor: '#13CE66', color: 'white'}},
{type: 'button-text', value: '按钮', style: { margin: 5, padding: 5, borderRadius: 12, paddingLR: 10, backgroundColor: '#F7BA2A', color: 'white'}},
{type: 'button-image', value: require('./assets/img_button.png'), style: {width: 40, height: 40}},
{type: 'br', style: {flexDirection: 'row', alignItems: 'center'}}
],
{type: 'select', options: '吃,喝,玩,乐', placeholder: '请选择', prop: 'select', style: {padding: 5}},
{type: 'tags',value:'玩', options: '吃,喝,玩,乐', prop: 'tags1', style: {padding: 5}},
{type: 'tags', value:'乐什么', options: '吃什么,喝什么,玩什么,乐什么', size: 2, prop: 'tags2', style: { padding: 5, borderRadius: 0}},
{type: 'counter', value: 1, max: 50, min: 1, prop: 'counter', style: {padding: 5}},
{type: 'radios', options: "男生1, 女生3", prop: 'radios1', style: {padding: 5}},
{type: 'radios', options: "男生1, 女生3", prop: 'radios2', style: {padding: 5, borderRadius: 40}},
{type: 'checkboxs', options: "男生, 女生,未定", prop: 'checkboxs', style: {margin: 5, alignItems: 'center'}},
{type: 'input-text', prop: 'input', maxLength: 12, placeholder: '请输入用户名', style: {borderColor: '#ccc', borderWidth: 1, padding: 20, margin: 5}},
{type: 'input-password', prop: 'password', maxLength: 12, placeholder: '请输入密码', style: {borderColor: '#ccc', borderWidth: 1, padding: 10, margin: 5}},
{type: 'rate', prop: 'rate', value: 1 , style: {padding: 5}},
{type: 'button-cancel', value: 'SlidePop', prop: 'slidPop',style: { margin: 5}},
{type: 'button-primary', value: '填充', prop: 'submit',style: { margin: 5}},
{type: 'br', style: {padding: 10}}
]}
/>
</ScrollView>
)
}
demo2. 组件相互通信
如下例,两个页面,页面1 定义了一个badge, 然后将此区域通过添加 redux 属性将其放入全局状态管理, 全局状态管理会将此区域的数据取出为***'bar_gouwuche': {count: 0}*** 放入状态管理表,而页面2定义一个按钮,每次点击会将页面1中的badge的值加 1
//页面1
render() {
return (
<Freedomen.Region
columns={[ {type: 'text-badge', prop: 'count', value: 0, filter: value => value > 99 ? '99+' : value, load: (value) => value > 0 }]}
redux={'bar_gouwuche'}
/>
)
}
//页面2
render() {
return (
<Freedomen.Region
event={params => {
if (params.prop == 'add') {
Freedomen.redux({
bar_gouwuche: (oldData) => {
oldData.count ++
return oldData
}
})
}
}}
columns={[{type: 'button-primary', prop: 'add']}
/>
)
}
demo3. 不需要重复定义变量
定义了和数据库对应的prop, 获取数据后便可以直接更新Region
constructor(props) {
super(props)
this.state = {
user: {}
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
user: {
userIconUrl: 'http://pic40.nipic.com/20140331/9469669_142840860000_2.jpg',
userName: '张三',
workName: '搬运工'
}
})
}, 400);
}
render() {
return (
<Freedomen.Region
data={this.state.user}
columns={[
{type: 'image', prop:'userIconUrl', value: require('../assets/image_header.png'), style: {width: 62, height: 62, borderRadius: 62}},
[
{type: 'text-h3', prop: 'userName', value: '未知'},
{type: 'text', prop: 'workName', value: 'IT'},
{type: 'br', style: {marginLeft: 12, flex: 1}}
],
]}
/>
)
}
demo4.组件数据化
将相同结构的数据化抽出
//columns.js
export default {
listItem: [
{type: 'image-product', prop: 'productImage'},
[
{type: 'text-h2', prop: 'productTitle'},
{type: 'text', prop: 'productDescription' }
],
{type: 'br-row', prop: 'detail'}
]
}
//页面
import columns from './columns.js'
render() {
return (
<Freedomen.Region
event={params => {
if (params.prop == 'detail') {
//do something
}
}}
columns={columns.listItem}
/>
)
}
demo5. 组件数据传递
下面的例子select选择 '消失Text' ,text 将会隐藏, Region内的每个元素都可以拿到全部的数据如style: (value, data) => {}, filter:(value, data) => {}, load: (value, data) => {}等,data即为全局数据
render() {
return (
<Freedomen.Region
event={params => {
if (params.prop == 'detail') {
//do something
}
}}
columns={[
{type: 'select', options: '开启Text,消失Text', prop: 'select'},
{type: 'text', value: 'Text', load: (value, data) => data.select == '开启Text'}
]}
/>
)
}
demo6. 组装组件
组装 一个搜索框
render() {
return (
<Freedomen.Region
event={params => {
if (params.prop == 'cancel')
return {productName: ''}
else if (params.prop == 'productName') {
//search(params.value)
}
}}
columns={[
{type: 'image-icon', value: require('./assets/search.png')},
{type: 'input-text', prop: 'productName', placeholder: '请输入要搜索的商品', style: {flex: 1}},
{type: 'button-image-icon', prop: 'cancel', value: require('./assets/cancel.png'), load: (value, data) => data.productName},
{type: 'br', style: {backgroundColor: '#f1f1f1', borderRadius: 10, flexDirection: 'row', alignItems: 'center'}}
]}
/>
)
}