React Native Study Notes 2, reactnative
1: How to Create a react native Project
First, go to the specified folder and execute react-native init ReactNativeProject on the terminal. ReactNativeProject is the project name;
2: How
Recently in the study of react Native. The feeling of development efficiency is really good, but the JSX grammar is not very comfortable to write.Tried the sublime Text 3 and visual Studio code to write codes, feeling the reaction is always slow a pat.or want to change back VS2015 write jsx, but with vs write jsx seems to be only in the suffix of. jsx file inside write. (Do not know if the VS has directly s
Special statement: I code is not used for any commercial purposes, but some of the personal learning experience, in order to make later more programmers less go some detours. * (If infringement of your copyright will be forgiven) *.Development tools: Webstorm,xcode1. The creation of Rn is generally created with this, because the latest is the wall:React-native Init MyApp--version 0.44.32. example code for the class that is cited in the library:Import
React-native-page-listviewFor the Listview/flatlist package, it is convenient to load the network data by paging, also supports custom drop-down refresh view and pull-up to load more view. Compatible with high version flatlist and low version ListView. Components are automatically selected based on the version of the react-na
1. Build the react-native environment in the CMD interface: refer to Https://reactnative.cn/docs/0.51/getting-started.html#content(1) npm install- g yarn react-native-cli Install the Yarn command tool and the react-native command
Android React Native Development Environment setup --- Under windows, android --- windows
Environment Construction
Environment building can refer to the RN official website, can also refer to the Chinese version: http://reactnative.cn/docs/0.45/getting-started.html
If you want to see the installation process of the original version, you can refer to the official address. This article is only my personal pra
In-depth introduction to React Native 2: My first application, reactnative
This is the second article in The React Native tutorial.
1. Environment Configuration
After the React Native environment is configured, you can start to c
Nodejs once the front-end JS pushed to the server side, and the 15 FB react-native RN again to push JS to the mobile side of the development wave. The advantages of Rn are not repeated here, it is that we are accustomed to the server, web-side development, and do not want to spend too much time mastering the Android, iOS Mobile-native development of the people's
React native as a new thing, the relevant information is not muchThe official documentation is relatively simple and lacks some examples of systemsIn the application of react native, eager to learn some of the best practices of others. So I want to learn by reading the systemI have seen the
React Native Knowledge 11-Props (properties) and State (State), react11-props
I. Props (attributes)
Most components can be customized using various parameters during creation. These parameters are called properties ). Props is specified in the parent component, and once specified, it will not change in the lifecycle of the specified component
By using different attributes for customization in different scen
One: Props ( attribute)Most components can be customized with various parameters when they are created. These parameters, which are used for customization, are called Props (attributes). props is specified in the parent component and, once specified, is no longer changed in the lifetime of the specified component By using different property customizations in different scenarios, you can maximize the reuse of your custom components. Simply refer to This.props in the render function and then proce
. Misunderstanding of React's Virtual DOM. React never said "React is faster than native operation DOM." React's Basic thinking pattern is to re-render the entire application every time there is a change. If there is no Virtual DOM, the simple thing to do is to reset InnerHTML directly. Many people do not realize that in a large list of all the data has changed,
The implementation of this tutorial is as follows:In order to achieve its fade-in/fade-out coverage, there is a Cancel button, here with a three-party component, you can first install:Three-party components address: Https://github.com/eyaleizenberg/react-native-custom-action-sheet (can see, you can also go directly to my steps)1. Run the project directory in Terminal: NPM install
React-native's official website Fetch introduction: https://facebook.github.io/react-native/docs/network.html#contentReact-native does not support $, that is, we cannot use $http to invoke the API, according to the React-native of
Like Android, react's components also have a corresponding life cycle. The life cycle of the Android React native component can be summarized in the following diagram as a whole.The component life cycle can be broadly divided into three phases:
The first stage : The first drawing phase of the component, in the above dashed box, where the component loading and initialization is completed;
Second
Swipe to view pictures third-party components: React-native-swiper, the current version is: 1.4.3, this version does not support Android.The following is a description of some of the use of the component, may summarize the incomplete, I hope we all together to improve.Official Document: Https://github.com/leecade/react-native
done, and improve the details.
:
It is recommended to open the video with text learning, in case there are some details not mentioned in the text, but the content in the text (according to the feedback corresponding update)
The choice of this app, and my personal hobbies, of course, the key is because the app is not complex, including the common app on the market style, and very smoothly to get all the request parameters and image resources, it is suitable for us to experience
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.