react-web 学习笔记
🌙
手机阅读
本文目录结构
react-web
react-web是淘宝前端团队开发的一个可以把react-native转换成web的工具, 大体上能实现了移动端的iOS/安卓/移动web这三端的代码共用. 当然细节上是充满了各种有解无解的坑.
注意：改项目基本属于凉凉的状态，请谨慎考虑使用（安邦备注与2020年3月26日）
官方资料
安装
npm install --save react-web
使用
第一步：项目中修改 webpack 配置
在 webpack 配置中，需要添加 alias 将 react-native 指向 react-web:
// webpack.config.js
module.exports = {
resolve: {
alias: {
'react-native': 'react-web'
}
}
}
第二步：使用 React Native API 写应用
import React, {Component} from 'react';
import {AppRegistry, StyleSheet, Text, View, Platform} from 'react-native';
class App extends Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.text}>Hello, world!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {padding: 10},
text: {fontWeight: 'bold'}
});
AppRegistry.registerComponent('App', () => App);
if (Platform.OS === 'web') {
AppRegistry.runApplication('App', { rootTag: document.getElementById('app') });
}
兼容列表
- ActivityIndicator
- ART
- Button
- CheckBox
- FlatList
- Image
- ImageBackground
- KeyboardAvoidingView
- ListView
- Modal
- Picker
- ProgressBar
- RefreshControl
- SafeAreaView
- ScrollView
- SectionList
- Slider
- StatusBar
- Switch
- Text
- TextInput
- Touchable
- TouchableHighlight
- TouchableNativeFeedback
- TouchableOpacity
- TouchableWithoutFeedback
- View
- VirtualizedList
- WebView
- findNodeHandle
- AccessibilityInfo
- Alert
- Animated
- AppRegistry
- AppState
- AsyncStorage
- BackHandler
- Clipboard
- Dimensions
- Easing
- Geolocation
- I18nManager
- InteractionManager
- Keyboard
- LayoutAnimation
- Linking
- NetInfo
- PanResponder
- PixelRatio
- Platform
- Settings
- StyleSheet
- UIManager
- Vibration
- processColor
- NativeModules
- ColorPropType
- EdgeInsetsPropType
- PointPropType
- ViewPropTypes
