作者：写一个文档记录学习和开发react native应用程序中需要的bug。已解决的问题和大家共勉。如果未解决中有你已经解决的问题，欢迎在评论区写出你的答案哦~
（本文档长期更新）
一、已解决bug
1. 不要随意打印点击事件的event
处理点击事件的方法中，千万不要打印event，在打开remote debug的时候，能正常打印。一旦关闭remote debug，这步就会出错，切记，切记！！！
<Button title='按钮' onPress={this._handleOnPress.bind(this, '123')}/>
......
_handleOnPress = (param, event) {
console.log(param);
//console.log(event); //千万不要打印event，在打开remote debug的时候，能正常打印。一旦关闭remote debug，这步就会出错，切记，切记
}
这个bug影响的范围极广，不容易察觉，也不容易找到。
作者经历：作者是在FlatList中嵌套了另一个FlatList，在内层的item中，用TouchableOpacity包裹item，然后设置了onPress方法，在onPress方法中打印了event。开发的时候一直开着remote debug，当开发完这个列表之后，关掉remote debug，点击item死活不起作用，误以为是remote debug出了问题，各种重启之后，不行。然后检查FlatList，检查嵌套FlatList，不行，去查TouchableOpacity和TouchableHighlight点击不响应的各种bug，各种尝试之后，不行。后来以为是bind函数用法有问题，又是一番研究之后，不行。几乎每一行代码都注释掉了，最后才定位到了这个不起眼的地方，哇哇哇哇哇。。。
2. console.log出来的内容和代码顺序不一致
比如，定义了一辆car，car中有一个people，people的名字叫hy，我们先分别打印出car、car.people和car.people.age，然后给car.people.age赋值18，再次打印出car、car.people和car.people.age。我们会发现，在赋值前，除了car.people.age，其他的两个本不该出现age，但是都出现了。是不是很诡异。（真相在截图下揭晓）
const car = {people: {name: 'hy'}};
console.log('car', car)
console.log('people in the car', car.people)
console.log('is the age of people in the car exist?', car.people.age)
car.people.age = 18
console.log('is the age of people in the car exist?', car.people.age)
console.log('people in the car', car.people)
console.log('car', car)
还未给age赋值，就打印出了age
其实并不是执行顺序出了问题，不要怀疑自己的认知。问题出现在了console.log上，console.log如果打印的是一个变量，指向的是变量的地址，所以你看到的值是实时的，也就是变现在内存中的值。证据如下：
证据一
把变量转化成字符串之后console.log('old car', JSON.stringify(car))，打印出字符串，则字符串中没有age。
const car = {people: {name: 'hy'}};
console.log('old car', JSON.stringify(car))
console.log('car', car)
console.log('people in the car', car.people)
console.log('is the age of people in the car exist?', car.people.age)
car.people.age = 18
console.log('is the age of people in the car exist?', car.people.age)
console.log('people in the car', car.people)
console.log('car', car)
把变量转成字符串之后直接打印
如上图所示，转成字符串之后，后添加的
age并没有出现在字符串中。
证据二
如果仔细观察，就会发现，凡是打印的变量，都会有一个三角形，点击三角形，则会展开全部内容。奥秘就在这，你点开三角形之后，会从内存中读出变量的所有属性，大家注意看上面的两张截图，car.people.age在赋值前，只能看到name，如果展开，则可以看到age，这个age就是从内存中读出的；而car.people.age赋值之后，不用点开就能同时看到name和age。
console.log(car.people)在赋值前后的细微区别
证据三
如果再仔细观察，还会发现，点击三角展开后，多了一个小感叹号，鼠标移动到感叹号上，就会出现一行提示Value below war evaluated just now.（这行提示没法截图展示给大家）
小感叹号
3. 修改data，FlatList不刷新
有时候我们修改了FlatList的data，但是FlatList并没有改变。例如sectionList新添加一个元素，但是列表并不会变长。这是因为FlatList继承自PureComponent，其props在===比较中没有变化则不会触发更新。
<FlatList
data={this.props.course.sectionList}
keyExtractor={(item, index) => index}
renderItem={this._renderSectionItem}
showsHorizontalScrollIndicator={false}/>
解决办法很简单，只要设置extraData={this.props.course}就可以了，如下
<FlatList
data={this.props.course.sectionList}
extraData={this.props.course}
keyExtractor={(item, index) => index}
renderItem={this._renderSectionItem}
showsHorizontalScrollIndicator={false}/>
关于这个特性，官方文档有说明，传送。
4. 使用react-native-orientation出现bug
bug如下：
TypeError: Cannot read property 'initialOrientation' of undefined.
先link
react-native link react-native-orientation
再重新运行程序
react-native run-ios //react-native run-android
注意：不是热更新，而是重新react-native run-ios / 或者 react-native run-android
5.react-native-fs出现bugCannot read property 'RNFSFileTypeRegular' of undefined
这个有可能是代码没有同步造成的，具体原因不详，但是解决方案已经找到。关掉APP，重新运行一下就OK了。
react-native run-ios //Android react-native run-android
二、未解决bug（这部分写得比较凌乱，随便看看就好）
Slider 如何隐藏thumbImage？文档没写有，也搜不到啊啊啊啊啊啊啊啊！！！！
Cannot read property 'RNFSFileTypeRegular' of undefined
react-native-video
TypeError: Cannot read property 'Constants' of undefined
各种重启之后，写了一个新的demo，就好了。发现了最简单的写法，这么写就可以运行了，入门不需要那些杂七杂八的参数，传送门
Code Signing Error: Signing for "DvaStarterTests" requires a development team.
Select a development team in the project editor.
Undefined symbols for architecture arm64:
"_YGNodeListCount", referenced from:
_YGNodeGetChildCount in libReact.a(Yoga.o)
_YGNodePrintInternal in libReact.a(Yoga.o)
_YGNodelayoutImpl in libReact.a(Yoga.o)
_YGRoundToPixelGrid in libReact.a(Yoga.o)
"_YGNodeListDelete", referenced from:
_YGNodeFree in libReact.a(Yoga.o)
_YGNodeRemoveChild in libReact.a(Yoga.o)
"_YGNodeListFree", referenced from:
_YGNodeFree in libReact.a(Yoga.o)
_YGNodeReset in libReact.a(Yoga.o)
"_YGNodeListGet", referenced from:
_YGNodeGetChild in libReact.a(Yoga.o)
_YGNodelayoutImpl in libReact.a(Yoga.o)
_YGZeroOutLayoutRecursivly in libReact.a(Yoga.o)
"_YGNodeListInsert", referenced from:
_YGNodeInsertChild in libReact.a(Yoga.o)
"facebook::react::getInspectorInstance()", referenced from:
getInstance() in libReact.a(RCTInspector.o)
facebook::react::JSCExecutor::initOnJSVMThread() in libReact.a(JSCExecutor.o)
facebook::react::JSCExecutor::terminateOnJSVMThread() in libReact.a(JSCExecutor.o)
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
** BUILD FAILED **
The following build commands failed:
Ld build/Build/Products/Debug-iphoneos/DvaStarter.app/DvaStarter normal arm64
(1 failure)
解决方案：删掉node_modules，然后运行yarn。
Code signing is require for product type 'Application' in SDK 'iOS 11.3'
欢迎加我微信，拉进群交流哦！
微信二维码
网友评论