第一个问题
我的应用中 ，比如有几个页面，好多个js都要使用到一些常量 ，一些配置 ，比如说 ，好多个页面都需要请求数据 ，但是 URL 的域名是一样的 ，只是参数不同 ，这个时候一般我想将相同的部分 提取出来 ，单独当成一个变量 ，但是在 react native 中 没有办法将多个js模块 公用 ，一般在java中，我们可以使用配置文件 ，或者写一个常量类 ，到其他的类中引用 ， 当然也可以使用 react native 中的 AsyncStorage这个API来存储，但是这样并不好 。因为我的项目中多个js模块中要请求网络 ，请求网络的URL 前边的域名是一样的，后边的参数不同 ，因为我的app是需要给不同的人使用的，不同的地方的人使用，后台提供的URL的端口号不同，这样的话我就需要修改好多地方，如果我将这个URL写在一个地方，其他的js模块直接引用，就好了，于是我突然想到了 es6 语法中的 倒入模块这个功能 。 在 一个js模块中使用 export 一个变量 ，在需要的地方 直接 import引用就好了 ，如果要修改，我只需要修改一个地方就 ok 了。
新建一个 js 模块 configinfo.js
import default var base_url = "http://xxxx.xxx.com:8080";
在需要引用的时候倒入
import base_url from './configinfo.js' ;
这样在请求网络的地方，将这个变量base_url 加上， 如果以后修改 ，可以直接修改configinfo.js 这里面的变量值 。
之前没有想到这个方法，一直是直接写在代码中 ，修改的时候，比较麻烦 ，现在好了，修改一个地方就好了 。主要还是对es6的语法不熟啊 。
每天进步一点点 。呵呵 。
第二个问题
在ios下使用 TextInput 输入信息的时候 ，获取到信息 是通过 onChangeText 这个方法回调接受到参数 ，但是在ios下，有时候会出现 ，用户输入信息后 ，信息并没有写到输入框中去 ，但是却是输入了 ，键盘监听到了 ，onChangeText中却是获取到了值 ，问题就是没有写到输入框中 。这个问题纠结了我很久 ，我并不是做ios的 ， 这里的问题主要是，ios输入的时候自带的文字联想和纠错功能 ，而且第一个输入字符还给你来个大写的 ，有时候很烦 ，主要是这个东西搞的鬼 ，解决办法 ，屏蔽掉自动拼写就好了。
TextInput中有一个属性是 autoCorrect ，使用它就好了。
它的值为boolean ，true活着false ，含义是： 如果为false，会关闭拼写自动修正。默认值是true。
修改成false就好了。
第三个问题
原来有这样一个bug存在 ， 我的一个页面中 ，当点击了一下按钮 ，就要请求网络获取数据等等，做一些比较耗时的工作，大概2秒 ，但是有这样一个bug存在 ，就是当用户点击了按钮 ，我自动会弹出一个转动的菊花 ，不停的转动 ，提示用正在拼命的加载中 ，但是 ，这个时候用户是可以点击其按钮 ，如果用户多次点击按钮，不停的点击按钮， 这个时候业务逻辑就出现问题了 。怎样解决用户点击一次按钮后，就不让再次点击按钮了呢 ？ 这个时候，可以在代码中实现 ，可以做一个标记 ，如果不是第一次点击 ，就不处理 。但是我想其他的控件比如输入框 ，其他的button 也不想让用户点击，这个时候咋办了 ，也许会有这样的需求 ，就是禁止当前页面 ，不让其他用户点击 ，就像弹出一个对话框一样 ，其他的控件都失去焦点了 。不能点击了 。这里还有一个问题 ，就是如果我的当前页面与其他几个页面是可以滑动的 ，也就是几个viewpager ，可以从当前页面滑动到下一个页面 ，如果哈滑动到下一个页面 ，那么刚才点击到这个按钮处理事件还没有结束呢 ？这也是一个bug ，这几个bug 测试人员测试出来了 ，让我修改呢？
这里我的一个做法是，让当前页面不可点击，不可接受到触摸事件 ，那么这个页面的所有控件都不能接受到事件 ，同时也滑动不到下一个页面。
一般我们在布局的时候 ，最外层一定是一个<View></View> 标签包裹下边的子布局 ， 那么我只要让这个view失去焦点就可以了 ，它下边的所有控件都接受不到事件 ，相当于禁止掉了这个页面 ，知道业务结束 ，让旋转的菊花控件 消失 ，这个时候 让View获取到焦点 ，解除这个页面的禁止状态 ，这样就解决了这个问题 。
怎么禁止呢？
View标签中有这样一个属性：
pointerEvents enum('box-none', 'none', 'box-only', 'auto')
auto：视图可以作为触控事件的目标。
none：视图不能作为触控事件的目标。
box-none：视图自身不能作为触控事件的目标，但其子视图可以。
box-only：视图自身可以作为触控事件的目标，但其子视图不能。
我只要在点击了按钮后 ，将这里属性修改成 none ，就可以禁止掉这个页面了 ，测试也是成功的 。这里的禁止不是单纯的设置值为 none这个值，而是使用 this.state这个状态变量 ，需要动态的设置这里的值，因为进入这个页面的时候不能禁止，点击了button后才能禁止 ，当业务完成后 ，又需要解开这个页面 。
但是禁止掉了什么时候打开呢？
我这里的业务逻辑是：当点击了按钮后 ，请求网络 ，过了两秒后 ，如果后台返回到数据是对的，我需要跳转到其它页面处理其他的事，完了之后还要跳转回到这个页面。
这里可以使用 回调 ，在其他页面处理完成后设置一个异步的回调方法 ，在当前页面处理这个回调就好了 。但是我没有这么做 ，如果跳转到其他页面不是自己的写的页面 ，或者是集成第三方的sdk ，这个时候不能写回调方法，咋办呢？
我使用的是 ：走生命周期方法 ，当从其他页面跳转回到当前页面，会调用生命周期方法，这个时候，我只要重写生命周期方法就可以完成将 state的值修改掉 ，就会刷新这个那个dom树，重新渲染 。
在布局的view中这样写：
<View style={[styles.contain]} pointerEvents={this.state.viewstop}>state中设置值
constructor(props) {
super(props)
this.state = {
viewstop:"auto",
};
}设置转动圆圈的显示和隐藏
showOrHide(){
if (this.state.animating) {
this.setState({
animating:false
});
}else {
this.setState({
animating:true
});
}转动圆环的控件
<ActivityIndicator
animating={this.state.animating}
size="large"
style={[styles.centering,{height:80}]}
/>当转动圆环出现的时候 ，页面禁止点击 ，当页面跳转出去的时候 ，隐藏这个转动的圆环。
这里在处理逻辑的时候 ，如果逻辑失败 ，如果有try catch 这样的语句 ，这里 隐藏掉圆环和解除禁止 。
返回页面调用的生命周期方法：
//是否需要更新
shouldComponentUpdate(nextProps, nextState){
this.setState({
viewstop:'auto',
})
return true;
}返回值一定是true ， 表示需要更新 ，设置属性值，刷新dom树 ，重新渲染 。
第四个问题
访问服务器有时候需要使用时间作为参数 ，时间是必须是格式化的 ，比如： 2015-09-21 12:34:42 或者没有后边 的时间，只有前边的日期 。怎么格式化呢？
//格式化时间和日期 格式为：yyyy-MM-dd hh:mm:ss
formatDateAndTime(that,fmt){
var o = {
"M+": that.getMonth() + 1, //月份
"d+": that.getDate(), //日
"H+": that.getHours(), //小时
"m+": that.getMinutes(), //分
"s+": that.getSeconds(), //秒
"q+": Math.floor((that.getMonth() + 3) / 3), //季度
"S": that.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (that.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}调用这个方法，格式化日期。
//获取时间
var date = new Date();
let endDateTime = this.formatDateAndTime(date,"yyyy-MM-dd HH:mm:ss");
date.setDate(date.getDate()-time);
var d = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+ date.getDate();
var startDateTime = d.replace(/\b(\w)\b/g, '0$1')+ " 00:00:00";使用格式化出来的日期当做参数，去请求服务器。
date.setDate(date.getDate()-time); 表示设置一个时间段 ，比如 设置5天 ，这里的time= 5 ，从今天往前数，表示前五 天 。
第五个问题
在react native与原生ios通讯等时候 ，出现了一个bug ，这个本来是不会出现的bug ，但是就是出现了 ，后来的解决办法是，重启了电脑 ，后来就好了。
第六个问题
下来列表框的实现，这个列表框相当于android 下的 popupwindow与listview组合的形式 ，下拉列表，与html中的select标签相似 ，点击一下列表框 ，子啊列表框的下边弹一列数据选项 ，这些数据是从服务器端获取的 。这里使用到一个控件。
这个封装的控件开源的，其他人写的 ，我使用了 。
ModakDropdown.js
第七个问题
界面框架可以滑动，可以点击，类似于微信的框架。
react-native-scrollable-tab-view
第八个问题
第九个问题
render(){
let login = 'Login';
let loginComponent = Login;
return(
<Navigator
initialRoute={{name:login,component:loginComponent}}
configureScene={(route)=>{
var conf = Navigator.SceneConfigs.PushFromRight;
conf.gestures = null;
return conf;
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component {...route.params} navigator={navigator}/>
}}
/>
);
}
以后遇到其他的问题再添加。。。
扫一扫
1158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
