React-Native attempts (1) -ListView and Navigator

1. setting up the environment

I read the document on RN Chinese online, which is translated into the original document. One thing to note is that you can select the document version at the top… I looked at several components, the sample code is always wrong, and then search related demo, changed for a long time. Later I found out that I was looking at the 0.3x version of the document.
there is a portal, the environment is relatively smooth.

2. create new projects

After you install the command line tool for React Native, you can create new projects using the command line.

CD, Desktop, react-native, init, RNNavigator

Now we have built a new RNNavigator project on the desktop.

CD RNNavigator react-native run-ios

The above command compiles the project and opens a new command line window that displays a service that opens the react-native, and the emulator is automatically adjusted.

  • The above is the first operation steps, theory first used after the run-ios compiler, then just use react-native start to open the service you can manually open the APP simulator, can start debugging development when you encountered a similar packager is still running make sure you’re running, or a packager server error when you are open another application service or you don’t open this application service.

So I understand that development is the prerequisite for debugging steps should include a package opening and JSBundle service, it should also modify the JS file after the condition to realize the real-time refresh simulator.


Here I compare vscode and webstorm to choose from, both provide plug-ins to support the development of reactnative, including the running procedures, debugging development, code tips, grammar, reminders and so on.
, I’m using vscode, a lightweight cross platform editor, and I’ve heard a bit about webstorm, and it should be pretty strong at the front end.
briefly describes the use of vscode:

  1. In the sidebar, select the plug-in button, and then search react native (with spaces), the first row should be the official Microsoft plug-in, after the reload editor install. Here is my current installation of several plug-ins, contacts are not many, but also to see people recommend.
    React-Native attempts (1) -ListView and Navigator
  2. Then you can run your application in vscode, one way is to use the cmd+shift+p shortcut key to open the command line tool for vscode, and to use > react native:run IOS can wait for the simulator to run.
    another can start in the lower TERMINAL (if there is no display console below, you can open cmd+shift+y), type react-native start, and then manually start the emulator’s APP.
  3. At this point, you can modify the JS, and then go to the simulator cmd+r real-time refresh interface to see the effect. Of course, you can press cmd+d in the simulator to open the built-in development menu. After you open the Enable Live Reload, the emulator will automatically refresh as long as the JS file is saved.
  4. Then there is the debug function.
    first mention, in the absence of vscode, the debugging method is the cmd+d official open open menu, click on the Debug JS Remotely, chrome will automatically open, this page is not your UI, you can open the developer tools, print control breakpoint debugging. Both
    , vscode, and webstorm provide debugging capabilities. Or when I debug need to open a JS editor, a simulator, a chrome breakpoint debugging, perhaps because the browser console print does not look good, I will open the Xcode console print.
    now just needs to break the breakpoint in vscode or webstorm, and click the debug button on the left. The editor will reopen the service and run the program. Note here that you can only debug at one end. If you are using a service that is opened by the ordinary command line, you can only debug with chrome. If you are using the vscode run command or debug button, it will only support debugging in vscode, just open the remote debugging button in the simulator, the theory can jump to the vscode breakpoint debugging. Before you start debugging, you need to set the configuration file, just click the gear button, and then select the reactnative option, which adds a launch.json at this point
React-Native attempts (1) -ListView and Navigator
When I open the All Exceptions option, it still doesn’t enter my breakpoint, but it goes to the breakpoint of the registered code, which I didn’t hit.
React-Native attempts (1) -ListView and Navigator
Search of information at home and abroad, but also temporarily unresolved, and I downloaded other people’s open source project is, but it can be normal debugging. My project was created by init, too. Where’s the problem?

When you use the breakpoint debugging function of vscode, you first have to open your reactnative service in vscode.

4. component development

Using ListView, I am looking at the document after the test, in the data source processing on the card, mainly through the setState to update the data source, access to the interface data, also have the corresponding network interface document. The
navigation controller and tabbar later learned the new react-navigation, which was described in great detail. It includes the use of tabbar, navigation bar and drawer.
, as well as WebView, refreshcontrol and so on, as a whole, the label is more convenient to use, you can download the code.

Style layout, say shame, hasty look at the attributes of flexbox, half guess half try to write down, and later still want to study layout, CSS knowledge.
effect diagram

React-Native attempts (1) -ListView and Navigator

By the way, no contact with the students, after the completion of the project, you need to CD to the directory, and then execute NPM install, that is, to download all the module package reactnative, there is a package.json, which is some version information. My understanding is similar to the concept of cocoapods.