febs-react-web
A framework for building web apps with React
Last updated 7 months ago by brainpoint .
BSD-3-Clause · Repository · Bugs · Original npm · Tarball
$ cnpm install febs-react-web 
SYNC missed versions from official npm registry.

Febs React Web

A framework for building web apps with React Native compatible API.

React-web@0.3.2 的基础上编写.

Febs React Web 项目兼容react-native, 能够以react-native方式编写项目, 并且最终导出html/js方式. 基于reactjs, 构建单页/多页webapp.

Create a new project

  1. Install npm install febs-react-web-cli -g

  2. Execute febs-react-web init <ProjectDir>.

  3. Execute febs-react-web start that starts the web dev server

  4. Execute febs-react-web bundle that builds the output.

    ( In Linux system maybe use sudo )

Fix platform differences

  1. Native events without direct pageX/pageY on web platform
if (Platform.OS == 'web') {
  var touch = event.nativeEvent.changedTouches[0];
  pageX = touch.pageX;
  pageY = touch.pageY;
} else {
  startX = event.nativeEvent.pageX;
  startY = event.nativeEvent.pageY;
}
  1. Should run application on web platform
AppRegistry.registerComponent('app', () => app);
if(Platform.OS == 'web'){
  var app = document.createElement('div');
  document.body.appendChild(app);
  AppRegistry.runApplication('app', {
    rootTag: app
  })
}
  1. Should care about fetch domain on web platform
import {
  Fetch,
  Jsonp
} from 'react-native'

Jsonp 只支持jsonp格式: callback({json}), 且只能是get方式. Fetch 使用XMLHttpRequest, 需处理跨域问题.

  1. Without some APIs like LayoutAnimation on web platform
var LayoutAnimation = require('ReactLayoutAnimation')
if(Platform.OS !== 'web'){
  LayoutAnimation.configureNext(...)
}
  1. Should manually specify the height of ScrollView
<ScrollView style={{height: 235}} horizontal={true} />

React Native compatible

Components

  • ActivityIndicatorIOS - ReactActivityIndicator
  • ActivityIndicator - ReactActivityIndicator
  • DatePickerIOS - ReactDatePicker TODO
  • DrawerLayoutAndroid - ReactDrawerLayout
  • Image - ReactImage
  • ListView - ReactListView
  • Modal - ReactModal
  • Navigator - ReactNavigator
  • PickerIOS ReactPicker
  • ProgressViewIOS - ReactProgressView
  • ScrollView - ReactScrollView
  • SegmentedControlIOS - ReactSegmentedControl
  • SliderIOS - ReactSlider
  • Switch - ReactSwitch
  • SwitchAndroid - ReactSwitch
  • SwitchIOS - ReactSwitch
  • RefreshControl - ReactRefreshControl
  • TabBarIOS - ReactTabBar
  • Text - ReactText
  • TextInput - ReactTextInput
  • ToastAndroid - ReactToast
  • Touchable - ReactTouchable
  • TouchableHighlight - ReactTouchableHighlight
  • TouchableOpacity - ReactTouchableOpacity
  • TouchableWithoutFeedback - ReactTouchableWithoutFeedback
  • View - ReactView
  • ViewPagerAndroid - ReactViewPager

APIs

  • Alert - ReactAlert
  • AlertIOS - ReactAlert
  • Animated - ReactAnimated
  • AppRegistry - ReactAppRegistry
  • AsyncStorage - ReactAsyncStorage
  • Dimensions - ReactDimensions
  • Easing - ReactEasing
  • InteractionManager - ReactInteractionManager
  • LayoutAnimation - ReactLayoutAnimation
  • PanResponder - ReactPanResponder
  • PixelRatio - ReactPixelRatio
  • StyleSheet - ReactStyleSheet

New Components features

  • ActivityIndicator
  • ViewPagerAndroid
    • add method: setPageWithoutAnimation
  • WebView
    • 对于跨站访问需对应服务器添加 meta http-equiv="Access-Control-Allow-Origin" content="*"; 或者添加至headers中
    • goBack/等函数无效.
  • Picker
    • 增加一个isRenderSelect:bool属性, 表明是否按照web select方式渲染.
  • Fetch
    • 增加timeout选项.
  • Navigator
    • 增加 pushRouteToFront(route, cb) 方法, 允许添加一个route到顶层, 且不刷新页面, 添加完成后调用cb()
    • 为导航方法如pop,push等添加一个cb参数, 当导航完成时调用.
  • ScrollView
    • 增加scrollTo动画.

New APIs features

  • Platform
    • add method: select
  • window.requestAnimationFrame
  • window.cancelAnimationFrame

Api of components

febs-react-component

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (31)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |