100 Stupid Questions for React Native

What is React Native? Is it same as React?

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. https://facebook.github.io/react-native/

Is React Native easy to learn?

It depends on what project you are going to build. As for front-end developer, you nearly need to learn nothing, only a new way to write javascript (Redux, JSX).

Do I must learn Redux?

No. (But everyone use it.)

What is JSX?

First of all, in React Native, you only need to learn javascript, you only use javascript. JSX looks like html but it is a syntax extension to javascript.

What is the benefit from JSX?

We dislike putting html tags into javascript because it creates chaos, but doesn’t document.querySelector('.login_from') this kind of code make you annoy? You have to switch tabs between project/static/html/login.html and project/src/js/login.js to check if you need something changed both in .js and .html. But now in React they are together in one component file, easy to check and does not have side effect. https://facebook.github.io/react/docs/components-and-props.html

How to start?

Let’s build an App!

How to set a global variable?

You can use Redux or Context, but in fact I wouldn’t call it as a global variable.

How to learn Redux?

No shortcut, go through Redux document and React Native Redux examples.

What are those files under "ios/app" folder? Can I delete them?

No, those files are necessary for the app. If we want to add a third-party library that would need us to modify info.plist file. So please don’t delete anything.

Why the text does not change on the screen?

The way to do that is using setState(xxx) function or using Redux. If you want to change anything and show it on the screen, you need to make components re-render.

Why setState is causing an endless loop?

Function setState() will trigger render, and you should avoid doing this inside any render recycle function: Lifecycle in React Native Component

I need to trigger an new action after an action is done, is that possible?

Yes. If you have multi-reducer and want to use the same variables, just adding the action into both switch cases, then they will trigger in the same time. If you need them be triggered by the right order, you could do something like:
this.props.someAction().then((responseObj: Object): void => {
      if (responseObj && responseObj.type !== THE_ACTION_YOU_DONT_WANT_TO_ACT) {
        this.props.someOtherAction();
      }
    });

Why the Redux store variables didn’t update when I trigger an action?

Variable reference problem, if you want to update an array in Redux store, using this way instead: To update an array in redux store.

Why the Simulator is extremely slow?

Please check if you accidentally press down “cmd” + “T” in iOS Simulator. If both android and iOS Simulator are extremely slow, you might need to close the debug window or set focus on the debug window.

How to debug AJAX call?

In Dev menu there is an option name Show Inspector, you could check the network in side Simulator there. If you feel the text is too small, the only choice would be some tool like Wireshark.

Why the AJAX call is fine on iOS Simulator but not working on android Simulator?

Android Simulator cannot access local host file, you need to set a Simulator host file and upload into Simulator. Here is a video about how to do it: https://www.youtube.com/watch?v=H-GSFIr0ixs

Why the AJAX call is not working on android with POST, PUT?

Every time android Simulator(maybe only in React Native) send AJAX request, it will add "Content-Type": "charset=utf-8" to the request headers automatically. And if your server side does not accept this, it might cause error.

I see an attribute is showing on many tags that names “ref”, what is it used for?

Refs can be as string attribute or callback method: https://reactnatve.wordpress.com/2016/05/24/refs-to-components

When I close the app, the data will lost, how to keep the data?

You can use redux-persist library or write native code by yourself. So if you are using redux-persist, then you must learn how to use redux.

How to upgrade React Native version?

First of all, do not follow the wrong document. If your version is 0.37, then follow the docs of version 0.37 not the docs of the version you want to upgrade. Then, check out rn-diff to see if it is ok to skip some version directly. For example my version 0.46.4 has to upgrade to 0.49.0 first because there is some change I have to do manually. After I make sure version 0.49.0 on my computer is working, then I upgrade to 0.52.0. If you want to upgrade React Native version, you should know what third library you are using. Because when upgrading is done. You have to add those library one by one again.

Android Simulator is not running the newest code, and reload is not solving the problem!

Try to close the React Native packager and delete the app in your Android Simulator. Then start everything again. If the problem still there, go checking if you are using redux-persist and do the purge first.

Can I send SMS by just running code in background instead of open SMS app in iOS?

No, you have to use SMS app in iOS to send SMS text.

Can I get the user cellphone number in iOS?

No 😦

How to pop up debug menu in a real device?

You can shake your cellphone if it is running in debug mode in the same wifi connection with your laptop.

Why there are always errors in Jest when I try to write some snapshots?

If the component is using WebView or something similar which is pretty complicated component, you will need to write jest.mock('WebView', () => 'WebView') to mock WebView component when you are writing snapshot. If the component is using redux, you need to import Provider from react-redux and write the component inside of . If the component will fetch data, you also need to mock the internet. For example you can use fetchMock. Jest framework are changing very fast, so you might need to keep version up-to-date and check the error that isn’t causing by version itself.

Why I must write “jest.mock('WebView', () => 'WebView')” when snapshot contain a WebView?

The short explanation is snapshot will go inside of the component to make snapshot as much detail as possible, but it is not necessary and also very hard to do that with some component. So, just mock them please 🙂

How to solve error “Unable to resolve module 'react/lib/ReactComponentTreeHook'”?

Make sure version in your package.json file is the version you want. For example, "react-native: ^0.43.3" is not same as "react-native: 0.43.3". Clean up and re-install everything. If the error still there, then try to run $ react-native-git-upgrade It is painfully that use jest.mock in every snapshot, is there a way to setup once for all? Yes, you can create a setup.js file in test folder and write the mock function there.The in the package.json file, change jest block into this:
"jest": {

"preset": "react-native",

"collectCoverage": true,

"coverageDirectory": "__coverage__",

"testRegex": "./__tests__/[^setup].*.js$",

"transformIgnorePatterns": ["node_modules/(?!react-native|native-base|react-navigation|react-native-fabric)"],

"setupFiles": ["./__tests__/setup.js"]

}
After integration react-native-push-notification, why Android devices always relaunch after clicking the notification? added android:launchMode="singleTop" to the main activity element in AndroidManifest.xml
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:launchMode="singleTop"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
  ...
</activity>

When will componentWillUnmount be trigger?

Most of the time it will be called if this component is not on the screen. And “not on the screen” does not mean disappear, but it means the screen is not in the memory. For example, the app has a home screen and home screen can navigate to the event screen. This means home screen will never trigger componentWillUnmount, because event screen is only cover home screen, the home screen is still there. And event screen will trigger componentWillUnmount when navigation pops the screen out.

What is the solution for “Invariant Violation: Native module cannot be null” in Jest?

Add those codes in setup.js( see the answer for "It is painfully that use jest.mock in every snapshot, is there a way to setup once for all?" ):
jest.mock('Linking', () => {

 return {

    addEventListener: jest.fn(),

    removeEventListener: jest.fn(),

    openURL: jest.fn(),

    canOpenURL: jest.fn(),

    getInitialURL: jest.fn(),

 }

})

How to mock react-native-fabric in Jest?

jest.mock('react-native-fabric', () => {

 return {

    Crashlytics: {

       crash: () => {},

    },

    Answers: {

       logCustom: () => {},

       logContentView: () => {},

    },

 }

})

How to access state inside action creator?

If there is only single action you need to trigger, normally you only need to pass the state into it.So it won’t be tricky. But if you need to trigger multi actions, you need to change : “return dispatch =>{....}” into “return (dispatch, getState) => {....}” And then you could use getState().xxxx to get reducer inside action creator, but also remember this way needs you to install redux-thunk.

Why “new Date()” get different results sometime?

When you try to debug react native, the debug is using chrome v8 engine to run javascript not native javascript core. So the results sometime are different.

Why "Date.toLocaleDateString()" ignores country settings on Android?

JSC on Android doesn't include the locale settings. It would increase the size of the APK by ~2MB. So we need to use some date format npm package by our own.

How to integrating type checking library “flow”?

1.First of all, use npm install flow-bin: npm install --save-dev flow-bin 2.Add npm script in package.json: "flow": "flow" 3.Open terminal and run: npm run flow init 4.Add //@flow on the top of the file which you want to check type. 5.After init, there should be a .flowconfig file, change it into:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
[include]
[libs]
./flowLibs.js
[lints]
[options]
unsafe.enable_getters_and_setters=true
6.Create a js file “flowLibs.js” in project root, if npm run flow check cause any error like “Module_Name. Required module not found”. You should write down a code in flowLibs.js like below:
declare module 'Module_Name' { declare var exports: any; };

Why WebView on iOS looks like zoomed in?

add scalesPageToFit = {false} in WebView jsx node.

Why I already linked the library in Xcode project but still received Promise error?

Do the link manually and check if you are using Cocoapods or you have a pod file in your project. If you do, use .xworkspace to build the app not .xcodeproj. If you are not using Cocoapods and there is a pod file in your project, just delete it.
Advertisements

我是如何自学C++成功的

由于百度贴吧账号莫名其妙被封了,加上本来就想弃用百度的东西,所以把文章搬运过来,贴吧上的文章都已经看不到了

看到有个帖子说C++自学根本找不到工作.好多初学者回复说太打击了.这里就来分享一下自己自学成功的案例吧.


在大学快毕业前从来没有学过任何和编程有关的技能.大专生一个,天天寝室lol.后来室友一个个去画CAD跑现场拉光钎修基站..
有个还在山里被菜花蛇咬了,一下子就觉得这个专业出去好辛苦好凶险,于是决定对自己的职业生涯来一个好好的规划.


身在天朝的西部地区的一个省会城市,房价和消费水平处于安逸适中的水平.不会像北上广那样凶险.漂亮妹子的数量可能也算全国第一第二了吧.
城区一个月600就能租到单间,找IT行业的工作也不容易.


在快毕业的最后一个寒假里,投了很多行业的简历,然后唯一一个打电话来的居然是达内,没错.虽然这个培训机构非常坑爹,但是在宣讲的时候还是了解到了全国IT的就业前景.于是决定,自学编程!!

当时决定自学编程,但是语言有很多.想了一下,还是C++吧..当时听说大型游戏很多都是用C++写的.


印象中那款minecraft在我老妈的笔记本上跑起来各种吃力,一打听是java写的,瞬间就不考虑java


然后告诉老爸这个打算,老爸是反对的.因为老爸是计算机原理老师,他的学生好像很多都混日子,出去的很多都没对口,所以对IT行业没有好感..老爸说你要是想入行就自学,我是不会给你出培训机构的学费的..

于是就更加鉴定了自学的打算了.


然后在网上找到里一套零基础学通C++的视频,发现很白话文,不像其他书那么多专业名词,也不是一上来没过几章就讲io操作..后来发现还有书,作者就是范磊老师了..于是买了一本


拿着这本书从早9点半到晚12点多,一直就坐在电脑前面看视频教程和撸这本书上的代码,去理解它.总共这样持续了26天(额..有本书叫什么名字来着).把这本1000多页的书给啃完了..当然里面mfc部分是没看的.当时看不懂.基础语法算是全部掌握了..然后没过几天就认识一种疾病叫做痔疮,的确是学得太猛太刻苦了


在这里要提醒大家.IT行业没事就多喝水多去上厕所,这样痔疮啊,椎间盘这些疾病就不会早早的找上你了.

然后休息了一周,去买了痔疮药看了医生.开始学习数据结构..看的那本书叫”数据结构与算法C++描述(第三版)“,好像是一本大学教材.


看到红黑二叉树那里就看不懂了.估计是理论知识不足.反正书上的代码全是伪码,前面每个章节的习题和数据结构,都自己写代码实现了一遍


然后又花了点钱买了两本书,一本是effective C++,这本书很不错,都是讲的C++代码在写的时候要注意的细节问题.还有一本是STL标准程序库.德国人写的,非常的严谨,可以算得上是STL的百科书了.非常详细,学STL必看的一本书.


学完这三本书之后,差不多快3个月了.也开始迷茫了.这个时候开始很针对的写简历,刷简历,把IT行业方面需要的优点都写上.然后自己开始研究dx,接触Cocos2d-x这些东西,很杂.很没怎么理解就找到一家实习公司了.这方面的研究就停止了.专心研究工作方面的东西


公司实习一个月期间,要我熟悉分区表,公司是做数据相关的.要我先自己摸索分区表mbr和gpt这些东西.然后用mfc写一个界面出来显示每个盘的容量盘符等信息.


于是我把孙鑫的mfc教程整个拷到了U盘里面拿到公司,然后开始边看分区表边学mfc..花了一个星期时间,把一个简单的分区表程序写出来了..不过那个代码简直没法看啊.根本封装什么都都没有.


然后项目经理叫我改代码,这时候才理解了代码整洁的重要性.之后又改了几版,了解了把函数功能实现封在dll里面之类的.然后突然快一个月的时候,项目经历突然请了半年的长假..然后我就郁闷了..想到这份实习工作也没要工资,马上又要毕业了.于是辞职走人准备再做新的打算


然后过了一个月,来到目前2年以来对我帮助最大的公司.公司3个合伙人,都是程序出身,我以C++的身份进去.在公司本来计划从事硬件测试项目.用python这些语言.


结果中间临时出现变动,开始了军工雷达GIS项目的学习.这里前期公司摸索了很多解决方案..从而导致了我一会写java,一会写C#,一会又写javascript.最后终于是定下来写javascript..大概做了4个月的项目..从中学到了很多东西,代码规范,测试驱动开发,项目构建系统,敏捷开发

接着在还有两三个月就快要又是一个新年的时候.公司又出现人事方面的问题.我就被派到了某研究所.在那里也终于是见识到了天朝党国的IT人事.感觉来说里面很多研究生的确的理论很不错.可是动手能力一般,很多都是为了混论文.加上制度问题,感觉对党国未来还是很有担忧啊


在研究所里,主要接触的qt,sql,opgl,scade这些东西,一直抗压扑火到了临近春节才完事.然后得了个公司最佳员工奖(公司小,也就10人,所以觉得很庆幸),发了一个ipad.因为当初我无意之间说老妈想在床上玩电脑,家里又只有台式


就这样,接下来又回到了GIS,回到了javascript. 但是心中一直有一个游戏开发梦,自己一直想知道游戏是怎么开发的,于是又辞职到了一家使用虚幻4引擎开发家装软件的公司偷学3d开发技术,最后又转到一家3d打印机公司用three.js开发移动控制面板控制3d打印机打印3d模型。

接着由于国内Google使用上越来越不方便,决定到海外碰碰运气,所以现在到了德国汉堡,使用react native开发手机应用。

如上就是自学C++找到工作的经历.