iOS在原有项目中使用react

来源:互联网 发布:上海mao livehouse知乎 编辑:程序博客网 时间:2024/05/21 03:24


代码下载地址: https://github.com/leicunjie/OCWithReact


0.使用Xcode创建项目

1. 在Podfile中添加:

pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # Add any other subspecs you want to use in your project
]


2.pod install


3.在根目录创建index.ios.js文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  Text,
} from 'react-native'


class OCWithReactDemo extends Component {


  render() {
      return (
              <View style={styles.container}>
              <Text style={styles.welcome}>
              Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
              To get started, edit index.android.js
              </Text>
              <Text style={styles.instructions}>
              Shake or press menu button for dev menu
              </Text>  
              </View>  
              );
  }
}


const styles = StyleSheet.create({
                                 container: {
                                 flex: 1,
                                 justifyContent: 'center',
                                 alignItems: 'center',
                                 backgroundColor: '#F5FCFF',
                                 },
                                 welcome: {
                                 fontSize: 20,  
                                 textAlign: 'center',  
                                 margin: 10,  
                                 },  
                                 instructions: {  
                                 textAlign: 'center',  
                                 color: '#333333',  
                                 marginBottom: 5,  
                                 },
});


AppRegistry.registerComponent('OCWithReactDemo', () => OCWithReactDemo);


3.在根目录执行命令 nam install react-native

4.在buildSetting 的 User Header Search Path中添加:

$(PODS_ROOT)/React/React 选择 recursive

5.启动react服务器,运行工程。




0 0
原创粉丝点击