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
view:Http://facebook.github.io/react-native/docs/view.html#style)2.colors[colorproptype] set a drop-down refresh to load the color of the progress indicator, you can set multiple colors ( set of up to four )3.enabled BOOL set whether to start the drop-down refresh feature4.Progressbackgroundcolor colorproptype settings drop-down refresh the background color of the load indicator5.Refreshing bool to set the
Suppose we now have a need to customize a component that consists of a small icon and a text description of the icon, with a background color, a back-view setting, and a width height setting. As shown is the composition of two such components.First, in the Index.android.js directory to create a new JS file, named Item.js, enter the template code inside/*** Sample React Native app* https://github.com/faceboo
Example code of the react native indexed city list component, reactnative
City list selection is a common feature of many apps, such as a typical meitu app. So how can we implement React Native?
To achieve the above results, you must first make a simple analysis of the composition of the interface, the interface data
1. Can be installed according to the official installation instructions, personally feel a little bit of English is fully capable of document installation procedures (https://facebook.github.io/react-native/docs/ getting-started.html), the specific environment variable how to configure the Internet one of the searchIf you want to quickly install Node,python,java, and you do not want to set their environment
()}}
Activeopacity={1}No hidden effect after clicking Trigger
4.ScrollView and flatlist-scrolling list, many properties, not listed; 5. image-Picture ContainerAvailable properties:
Source={require (' .../.../img/top.png ')}
6.modal-modal Frame
A warning or prompt that can be used as a toast without action for 2 seconds to disappear
Also available as an Action prompt dialog box with interactive buttons;
Ii. the CSS1 of RN. Style declaration:const StylesCo
React Native developed Address Book application (using JavaScript to develop native iOS apps, Vczero) 0, Preface: Project Address: HTTPS://GITHUB.COM/VCZERO/REACT-NATIVE-APPWelcome to issues to discuss any issues, including "fitting room" ....I. Project introduction based on
Some time ago react Native for Android released, feel react Native will be more and more companies began to research, use. So Saturday also took time to build the iOS development environment, so that in the future to take advantage of leisure to learn.Needless to say, the following is a simple list of steps.1. Installi
React native pictures saved to a local album (iOS Android) one, requirements analysis
1,react native Save the network image to the album, iOS can be used with RN cameraroll perfect solution, but the Android side does not support to save pictures from the network.
2, save only one picture to the local album (such as gen
Icons is can directly use the image name, you can load the three sides of the picture, the use is very convenient, you do not need to plug various pictures in the project folder, save a lot of space, the following to see how to use it!1. First open the terminal into our project folder (please refer to: http://blog.csdn.net/margaret_mo/article/details/51304062)Input: npm Install react-native-vector-icons--sa
Steps
Http://facebook.github.io/react-native/docs/getting-started.html#content
Follow the steps of the react native website step by step installation, record for example1. Install homebrew (enter the command at the command terminal according to the official website)2. Install NVM (Node version manager), w
React-native Layout
Width unit and pixel density
The react width does not support percentages. When setting the width, the unit {width: 10} is not required. What is the specific width of 10?
I don't know whether the documents on the official website are incomplete or I am blind, but I still cannot find them. I 'd like to find an experiment myself:
The default re
Recently trying to use React Native to do something, found that the real machine debugging or some pits exist. IOS Real-Computer debuggingFirst, you have to make the debug computer and your phone must be in the same WiFi network below
Open the files for your IOS project AppDelegate.m
Change jsCodeLocation to localhost your computer's local area network IP address
In Xcode , select your pho
First, the problem descriptionIn the process of configuring the development environment in accordance with the React-native configuration tutorial on the WIN7 platform on the network, when the difficult step to react-native run-android, it is found that there has been an error, as follows:The error description informat
teach you how to build iOS React native environment in your MacHttp://www.cnblogs.com/damnbird/p/6074607.htmlpreparatory work1. You need a Mac computer. (This is not nonsense?) What I'm using is air~~ poor. )2. The environment in which I operate the computer system isVersion 3.xcode: 8.0 official editionRequired Software1.HomebrewHomebrew, a Package manager for Mac Systems, is used to install Nodejs and som
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.