ReactNative 原生与Native交互

来源：互联网发布：程序员需要学哪本书编辑：程序博客网时间：2024/05/26 12:57

index.ios.js文件：

import React,{Component} from 'react';
import {requireNativeComponent} from 'react-native';
import Style from './src/Style'
// import dismissKeyboard from 'react-native'
import {Keyboard,TouchableWithoutFeedback} from 'react-native'
import {NativeModules} from 'react-native'

UZGRNModel是你在Native端注册的module
var OCModel=NativeModules.UZGRNModel;

import {
View,TextInput,AppRegistry,Text
} from 'react-native';

export default class UZGTextView extends Component{
constructor(props) {
super(props);
this.state = {
text:''
};
}

render(){
return(
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={Style.backgroundStyle}>
<TextInput style={Style.textInputStyle}
multiline={true}
placeholder='请写下您的建议或意见,每一条反馈掌柜都会认真对待'
placeholderTextColor='#888888'
returnKeyType='done'
maxLength={200}//限制输入的最多字符数
autoCorrect={false}
blurOnSubmit={true}//在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<TouchableWithoutFeedback
onPress={() => {
this._commitText()
}}>
<View>
<Text style={Style.commitStyle}>提交反馈</Text>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
);
}

_commitText(){
OCModel.postFeedBack(this.state.text)
}
}

//UZGReactNative，最后导出的组件要与Native端注册的组件名字一致

RCTRootView * rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation

moduleName:@"UZGReactNative"

initialProperties:nil

launchOptions:nil];

AppRegistry.registerComponent('UZGReactNative',() => UZGTextView);

style.js文件：

import {StyleSheet} from 'react-native'
import {Dimensions} from 'react-native'

var screenWidth=Dimensions.get('window').width;

var Style = StyleSheet.create({
backgroundStyle:{
flex:1,
backgroundColor:'#ffffff',
},
textInputStyle:{
marginTop:30,
marginLeft:10,
marginRight:10,
height:125,
backgroundColor:'#eeeeee',
borderRadius:3,
fontSize:14,
paddingLeft:10,
paddingRight:10
},
commitStyle:{
marginTop:24,
marginLeft:10,
marginRight:10,
backgroundColor:'#9f9f9f',
height:40,
fontSize:15,
borderRadius:5,
textAlign:'center',
lineHeight:40,
color:'white',
},

commitSelelcStyle:{
backgroundColor:'#93b300',
}
});
//导出Style，不然js文件里找不到这个样式
export default Style;

Native文件：

#import <Foundation/Foundation.h>

#import <React/RCTBridgeModule.h>

@interface UZGBridgeManager : NSObject<RCTBridgeModule>

@end

#import "UZGBridgeManager.h"

@implementation UZGBridgeManager

//在 JS中访问这个模块的名字:UZGRNModel桥梁

RCT_EXPORT_MODULE(UZGRNModel);

RCT_EXPORT_METHOD(printText:(NSString *)text){

[SMAlertViewshowAlert:text];

}

RCT_EXPORT_METHOD(add:(NSInteger)numA andNumB:(NSInteger)numB result:(RCTResponseSenderBlock)callback) {

//回调函数

callback(@[@(numA + numB)]);

}

RCT_EXPORT_METHOD(postFeedBack:(NSString *)inputMessage){

//意见反馈提交

NSLog(@"RN调用Native代码并传值:%@",inputMessage);

}

@end

在Xcode终端看到打印信息

到此demo完成

阅读全文

0 1