阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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
      目录
      目录