React Native 在 PDA 上开发问题总结

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u013783000/article/details/90035704

1.react-native-prompt

1.使用react-native-prompt,弹出输入框时,出现 Module RCTEventEmitter is not a registered cakkable module(calling receiveTouches)

解决方案: 需要安装prop-types

  1. npm install --save prop-types
  2. 修改 react-native-promptPrompt.js 文件
  3. 替换 import React, { Component, PropTypes } from 'react'import React, { Component } from 'react'
  4. 添加 import PropTypes from 'prop-types'
  5. 重新运行 react-native run-android

2. react-native-prompt 输入框显示多行,textinput自适应高度

  1. 修改 Prompt.js文件
    1. textInputProps 后追加 multiline:PropTypes.bool
    2. onChangeText 后追加 multiline:false 默认值
  2. 内容大概在119行,TextInput 组件添加 multiline={this.props.multiline}
  3. 修改 styles.js 文件 ,大概在 38行 ,删除 height: 80

3.获取react-native-prompt 输入框值

   <Prompt  onSubmit={(text)=>this.state.servertext=text} />

2.react-native当点击TouchableOpacity时,要点击两下才会触发onPress解决办法

ScrollView 设置属性 keyboardShouldPersistTaps={true}

3.react-native 点击TouchableOpacity时,会出现点击状态

TouchableOpacity 添加属性 activeOpacity={1},其中 activeOpacity 是一个number值在0~1之间,1 表示 不出现点击状态

4.View 设置边框阴影

在 view 样式中 添加 elevation: 4 ,边框底部会出现引用,目前不能自定义阴影color

5.监听设备物理按键,例如音量键等

DeviceEventEmitter 组件是一套发送和接收通知的方法。下面是部分代码:

  1. componentDidMount 添加事件监听函数 :

DeviceEventEmitter.addListener("keyUp",function (e){
console.log(“keyCode:”+e.which)
})

2.在android/app/src/main/java/com.xxx/MainActivity.java 文件内添加方法:

private void sendEvent(ReactContext reactContext, String eventName,
@Nullable WritableMap params){
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName,params);
}
@Override
public boolean dispatchKeyEvent(KeyEvent event){
ReactContext reactContext=getReactInstanceManager().getCurrentReactContext();
WritableMap params=Arguments.createMap();
int keycode=event.getKeyCode();
params.putInt("which",event.getKeyCode());
if(event.getAction()==KeyEvent.ACTION_UP){
sendEvent(reactContext,"keyUp",params);
}
return false;
}

 `keyUp` 和 `sendEvent(reactContext,"keyUp",params);`中的 keyUp一致
 `which` 和 `params.putInt("which",event.getKeyCode());` 中的 which一致

欢迎进行评论

展开阅读全文

没有更多推荐了,返回首页