Reactnavtive Framework Tutorials (2)

Original: Http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript

Note: All the pictures in the Baidu album space, if you do not see the picture, please copy the image URL, and then paste into the address bar to view.

Hello World JSX

Before we built a simple UI with react.createelement , React would convert it to the corresponding local object. But for complex UIs, such as those that are nested within a component, the code becomes very ugly.

Make sure the app stays running, go back to the text editor, and change the return statement in Index.ios.js to:

return < react. text style = { styles. text > Hello World ( again </ react.text >;

This uses the JSX syntax, the JavaScript syntax extension, which basically blends the JavaScript code with the HTML style. If you are a web developer, you should not be unfamiliar with this. Save Index.ios.js back to the iphone simulator, press the shortcut key cmd+r, and you will see the app display becomes "HelloWorld (Again)".

Re-running the React Navtive app is as easy as refreshing a Web page.

Note : If you still have questions, you can use the browser to look at your "Bundle" content, it should also have changed.

Using navigation

In index.ios.js, modify the Propertyfinderapp class to HelloWorld:

class HelloWorld extends React. Component {

We still want to display the word "Hello world", but no longer use it as the root view of the app.

Then add the following code:

class Propertyfinderapp extends React. Component { Render() { return ( < React. Navigatorios Style={styles. Container} Initialroute={{ Title: ' property Finder ', Component: HelloWorld, }}/> ); } }

This creates a navigation controller and specifies its appearance style and initial route (as opposed to the HelloWorld view). In web development, routing is a technique for representing the way an application navigates, that is, which page (or route) corresponds to which URL.

Then modify the CSS style definition to add a container style to it:

var styles = React. StyleSheet. Create ({ Text: { Color: ' black ', BackgroundColor: ' White ', FontSize: Margin: }, Container: { Flex: 1 } });

The meaning of flex:1 is explained later.

Go back to the simulator and press Cmd+r to see the effect:

The "Hello World" text is now displayed as the root view of the navigation controller.

Create a search page

Create a new searchpage.js file and save it in the same directory as Index.ios.js . Add code to this file:

' use strict ' ; var React = require(' react-native '); var { StyleSheet, Text, TextInput, View, Touchablehighlight, Activityindicatorios, Image, Component } = React;

A destructor assignment (destructuringassignment) is used here to assign multiple object properties to multiple variables at once. So, in the later code, we can omit the React prefix, such as using StyleSheet instead of react.stylesheet. The deconstruction assignment is especially handy for array operations, please refer to Wellworth learningmore.

Then define the following CSS style:

var styles = StyleSheet. Create ({ Description: { MarginBottom: FontSize: TextAlign: ' center ', Color: ' #656565 ' }, Container: { Padding: MarginTop: Alignitems: ' center ' } });

The standard CSS property. Although using CSS is worse than setting a UI-style visualization in IB, it is always better to write code in the Viewdidload () method.

Then add the following code:

class Searchpage extends Component { Render() { return ( < View style={styles. Container}> < Text style={styles. Description}> Search for houses to buy! </ Text> < Text style={styles. Description}> Search by Place-name, postcode or search near your. </ Text> </ View> ); } }

A container view that contains two labels.

The last is this sentence:

Module. exports = Searchpage;

This sentence will enable the Searchpage class to be referenced by other JS files.

Then you need to modify the app's navigation.

Open index.ios.js add require statement to file header:

var Searchpage = require('./searchpage ');

In the render function of the Propertyfinderapp class, modify the Initialroute to:

Component: searchpage

Here we can remove the HelloWorld class and its corresponding style, we do not need it.

Go back to the simulator and press Cmd+r to see the effect:

Elastic box Model

We can use basic CSS properties to deal with issues such as margins, spacing, color, and so on. However, it is sometimes useful to add a new elastic box model using CSS.

Reactnative uses the Css-layout Library to implement the elastic box in this library, which is well understood by both iOS and Android.

In this app, the default vertical flow layout is used, where child elements in the container are laid out in order from top to bottom. Like what:

This is referred to as the spindle , which may be horizontal or vertical in orientation. The longitudinal position of each child element is determined by their margin (margin), spacing (padding), and height. The Alignitems property of the container is set to center (center), which determines the position of the child element on the intersection axis. In this case, the child elements are centered horizontally.

Next we add some text input boxes and buttons. Open Searchpage.js after the second Text element is added:

< View style={styles. Flowright}> < TextInput Style={styles. Searchinput} Placeholder=' Search via name or postcode '/> < Touchablehighlight style={styles. Button} Underlaycolor=' #99d9f4 '> < Text style={styles. ButtonText}>Go</Text> </ Touchablehighlight> </ View> < Touchablehighlight style={styles. Button} Underlaycolor=' #99d9f4 '> < Text style={styles. ButtonText}>location</Text> </ Touchablehighlight>

This code adds two top-level views: a text input box plus a button, and a separate button. The styles they use will be introduced later.

Reactnavtive Framework Tutorials (2)