- 因为RN版本更新频繁，所以后期每次新建一个工程的时候，都会报类似
unmet peer dependency的警告，说RN的版本不符合之类的。找了stack over flow和github上面的很多资料，没有招到相应的解决方案。暂时先不管了。因为似乎不影响使用。只是不知道后续会不会需要指定版本来创建项目 - 如果要修改项目存放的地址，记住，这个项目的父路径不能包含空格或特殊字符，否则Xcode中无法编译通过。这是今天碰到最大的坑。
2017.8.4
知识点
- state状态机的概念
在一个类初始化时，在构造函数中必须定义的变量.
构造函数
- 箭头函数的理解
=>简单的理解，箭头函数也可以看做一个简单的匿名函数。- 函数的左边是参数，右边是表达式，可以看做
() => {return something}. - 如果参数为空，用
()表示.否则可以用(param1,param2) => {return param1,param2,'3'} - 左边的参数可以和右边毫不相关（但是这样没什么意义，如果 不相关，那直接就传空参数就好了）
- 有时候，右侧的表达式是一个函数，例如
() => this.someFunction,虽然这样写不会报错，个人感觉目前为初学阶段，统一右侧加上表达式,改写为
() => {return this.someFunction;}
或
() => {this.someFunction;}
- 函数的左边是参数，右边是表达式，可以看做
回调的机制 —— 包括如何切换状态机
先说如何切换状态机.指的是在需要的时机，改变this.state中某个变量的值。以下面的代码为例，修改的就是inputNum和inputPW
this.state = {inputNum: '',
inputPW: '',};
修改状态机
- 必须调用
this.setState方法 -
setState参数必须是一个函数变量(可以查看他的函数原型参数)，我们这里通常使用箭头函数来传值
this.setState(
() = {return {inputNum:'neededValue',}}
);
下面是一个示例代码
以我们目前看到的textInput为例来说明
export default class LoginDemo extends Component {
constructor(props) {
super(props);
this.state = {
inputNum: '',
inputPW: '',
};
this.updatePW = this.updatePW.bind(this);
}
updateNum(newText) {
console.log("设置数字,输入" + newText);
this.setState(
() => {return {inputNum:newText,}}
);
}
updatePW(newText) {
console.log("设置密码,输入" + newText);
this.setState()
}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.inputStyle}
selectionColor={'red'}
placeholder={"请输入数字\n"}
placeholderTextColor={'purple'}
onChangeText={
(a) => {this.updateNum(a);}
}
/>
<Text style={styles.welcome}>
您输入的电话号码 : {this.state.inputNum}
</Text>
<Text style={styles.welcome}>
您输入的密码 : {this.state.inputPW}
</Text>
<TextInput style={styles.inputStyle}
maxLength={6}
placeholder={"请输入密码\n"}
secureTextEntry={true}
onChangeText={(newText) => this.updatePW(newText)}
/>
</View>
);
}
}
代码实现的目的是在 TextInput中输入字符串，同时通过监听函数onChangeText去更新另一个Text的显示值.
- 这里就涉及到了，我改变了状态机变量
inputNum，如何使他生效的问题。
修改inputNum要调用到设置状态机的函数方法.this.setState(() => {return {inputNum:'something'}})
根据书上的理论，修改状态机，虽然从JS的代码上来说，通过this.state = someValue是可行的，但是RN中并不能识别这种赋值方式。 - 回调函数
onChangeText的参数是一个函数变量。这里就带来了一个问题—— {}中放的究竟是怎么样的函数，才算合适？-
onChangeText={this.updateNum}—— 直接传递函数。
理论上似乎可行，书中写的也是说可行的。但是实际运行的时候会报错，
截图
-
从报错的原因来看，应该是onChangeText要求{}中传递的参数是一个函数，但是实际上，调用 this.updateNum的时候，他是将this.setState的执行结果返回了。
-
onChangeText={this.updateNum(newText)}
这种方式不用讨论，肯定不行。首先newText未定义，其次就算newText是一个已知数，那么执行的结果仍然不是一个函数。
如果将newText换成一个具体的字符串'string'，执行的结果会造成死循环. - 从上一点来看，如何将一个带形参的函数传递进去，变成了应该要解决的问题。因此就要用到箭头函数
onChangeText={(a) => {this.updateNum(a);}}
真机调试
鉴于上面的介绍，我在两个平台调试时，并不以 react-native run-ios或react-native run-android命令来运行，而是分别使用Xcode和Android Studio来做。
Xcode没什么好说了，但是安卓的真机调试有一个坑。
真机调试首次加载可能会报错：
java.lang.RuntimeException: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server.
这是因为还没有在手机上设置 server 和 port，摇一摇启动设置页面，点击 DevSettings -> Debug server host & port for device -> 输入 [本机ip]:8081，本机 ip 可用 ifconfig 命令查看。输入完后返回，再摇一摇然后点击 Reload 即可。
