react-bucket

React全家桶

这个项目短期的计划是给中文用户用的，方便身边的朋友。长期未考虑。

Install

Browser/Production

<!-- no react.js, no react-dom.js, no babel-polyfill -->
<script src="https://cdn.jsdelivr.net/npm/react-bucket@0.0.9/umd/react-bucket.production.js" />
 
<script src="/your/app.js" />

Document

Component

Component	描述	props
View	视图	[]
Text	文字	[]
ReactRouter.Link	链接	[to]
ReactRouter.Switch	组件切换	[]

### API

API	描述	注意
React
ReactRouter
StyleSheet
css
AppRegistry

import { Menu } from 'react-bucket'

• StyleSheet.create(styleMap: Object) styles: object
• StyleSheet.assign(styleList | styleMap) prefixedStyle: object
• StyleSheet.flatten(nestedStyleList: Array): styleList: Array

Example:

import { StyleSheet, View } from 'react-bucket'
 
const styles = StyleSheet.create({
  btn: {
    height: 36,
    textAlign: 'center'
  },
  btn_red: {
    backgroundColor: '#F33'
  }
})
 
ReactDOM.render(
  <View style={[styles.btn, styles.btn_red]}>Click Me!</View>
)
 

import { View } from 'react-bucket'
// import { View } from 'react-bucket/Components'

import { TextInput } from 'react-bucket'

import { Button } from 'react-bucket'

import { Text } from 'react-bucket'

import { Popup } from 'react-bucket'

import { Image } from 'react-bucket'

import { PromiseView } from 'react-bucket'
 
class Example extends Component {
 
  render() {
    return (
      <PromiseView
      promise={a_promise}
      render={(status, result) => {
        return (
          <View>status: {status}</View>
        )
      }}
    />
    )
  }
}
 

import { Slider } from 'react-bucket'
 

import { ActivityIndicator } from 'react-bucket'
 

import { AsyncLoader } from 'react-bucket'
 

import { ScrollView } from 'react-bucket'
 

import { FilePicker } from 'react-bucket'
 

API

AppRegistry

import { React, AppRegistry } from 'react-bucket'
 
const App = () => {
  return (
    <View >hello world!</View>
  )
}
 
AppRegistry.registerComponent('app', () => App, {
  mountPoint: document.getElementById('app')
})

Utils

• Utils.flatten

Webpack

License

MIT