React native layout attention point

One, react native many are ES6 grammar. 1 lines. The expression is the strict mode of JS

‘Use strict’;
In strict mode, variables must be declared first, and then assigned, defined, etc .;
There is this binding.
2 to 8 lines. Import dependencies can be understood as import XX.react-native.React; and import XX.react-native.React.AppRegistry; in Java. 9 lines. Custom components, components are the basic elements of React Native, can be compared to Activity. 10 to 24 lines. The render () method, my understanding is used to render the page. The xml and layout inside are similar and are used for layout. Line 26 to line 43. Through the StyleSheet.create () method, a set of attributes required for layout is generated. Add style attribute to <View /> etc. in render (). Analogously, the attributes of each View in Android are realized through style, and the attribute set we create is the style set. 44 lines. Register custom components. Second, the click event in react native generally uses Touchable components
  Among them are commonly used TouchableHighlight and TouchableOpacity
TouchableHighlight is the change in background transparency
TouchableOpacity The transparency of the text or picture itself

Note: Touchable component series can only contain one child component, that is to say you want multiple, you can nest View component to achieve. Such as:

 
<TouchableHighlight>
      <View>
            <Text> t1 </ Text>
    <Text> t2 </ Text>
      </ View>
</ TouchableHighlight>
 

 Three, page jump First of all, we must configure the page jump controller as follows:
render () {
  return (
    <Navigator
      initialRoute = {{id: ‘Page‘}}
      renderScene = {this.actionTo} />
  );
},
actionTo (route, navigator) {
  switch (route.id) {
    case ‘Page‘:
      return (<Page navigator = {navigator} />);
    case ‘Page2’:
      return (<Page2 navigator = {navigator} />);
  }
}
  Navigator is the page jump controller, initialRoute refers to the initial page, renderScene is the method of callback when the page jumps, here is the actionTo method.

    The actionTo method is to jump to different pages through the route attribute, which can be understood in this way. When you need to jump to the next page, just call the following method
 this.props.navigator.push ({
   id: ‘Page2’,
 });
 

   
Notes on react native layout