ios原生项目集成React-native

1.创建一个原生项目

创建ios文件夹,将项目所有原生文件移到下面
创建ReactComponent文件夹，放置react-native相关文件

10F428AB-3CDF-42CF-B56F-5B1E57B935E2.png

AA0EDB4C-3FEA-4C6B-A4BC-2C36E364D018.png

2.通过pod创建React-native

取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
请将:path后面的内容修改为正确的路径。

target 'React_Combine' do
pod 'React', :path => '../ReactComponent/node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # 添加其他你想在工程中使用的依赖。
  #path后面的路径需要根据实际项目目录结构进行修改
]
end

3.创建index.ios.js

import React, { Component } from 'react';
import {
    AppRegistry, //注册
    StyleSheet, //样式
    Text, //文本组件
    View,  //视图组件
    TextInput,
    Image,
    ScrollView,
    ListView,
    Button,
    Navigator,
    TouchableOpacity,
    AlertIOS,
} from 'react-native';

//ES 5写法
var SimpleApp = React.createClass({

    //不可改变的值
    getDefaultProps(){
      return{
          age:18,
      }
    },

    //可以改变的值
    getInitialState(){
      return{
          title:'不透明触摸',
          person:'张三',
      }
    },

    render() {
        return (
            <View style={styles.container} ref='topView'>
                <TouchableOpacity
                    activeOpacity={0.5}
                    onPress={()=>this.activeEvent('点击')}
                    onPressIn={()=>this.activeEvent('按下')}
                    onPressOut={()=>this.activeEvent('抬起')}
                    onLongPress={()=>this.activeEvent('长按')}
                    >
                    <View style={styles.innerViewStyle}>
                        <Text ref="commonEvent">常用事件</Text>
                    </View>
                </TouchableOpacity>
                <View>
                    <Text>{this.state.title}</Text>
                    <Text>{this.state.person}</Text>
                    <Text>{this.props.age}</Text>
                </View>
            </View>

        );
    },

    //当按下鼠标
    renderPress(){
        console.log("按下鼠标");
        AlertIOS.alert("按下鼠标");
    },

    activeEvent(event){
      this.setState({
          title:event,
          person:'李四'
      })
      //拿到view
        this.refs.topView
        this.refs.commonEvent

    },

});

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    innerViewStyle:{
        backgroundColor:'orange',
    }

});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

4.在ViewController添加自定义的控件

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    NSLog(@"touch begin-----");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"SimpleApp"
                         initialProperties :
     @{
       @"scores" : @[
               @{
                   @"name" : @"Alex",
                   @"value": @"42"
                   },
               @{
                   @"name" : @"Joel",
                   @"value": @"10"
                   }
               ]
       }
                          launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

5.更新App Transport Security

修改ATS,info.plist文件

<key>NSAppTransportSecurity</key><dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict></dict>

6.启动开发服务器

cd node_modules/react-native
npm run start

参照:
http://reactnative.cn/docs/0.24/embedded-app-ios.html#content