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完成