React-native--html/css

To do front-end development, familiar with the development of the HTML+CSS+JS model, if you do not look at the RN principle, directly with the old logical thinking of Rn, may be surprised. The premise of efficient development requires learning and understanding the principles of Rn. The main document of this paper is about the problem of the HTML level of RN development.

First, the HTML of RN

The components provided by RN (called tags in html) are commonly used in:

1.view-View Container

Available properties

• Style={[styles.nav, {bordercolor: ' #0ff '}]}
• onlayout={(Event) = {this.getviewinfo;}}
• Getviewinfo (event) {
  Console.log (Event.nativeEvent.layout.height)
  }//get the width and height properties of the view container

2.text-text Container

Available properties:

• Style={{textalign: ' Center '}]}
• NUMBEROFLINES={2}
  The text that is exceeded after the component sets a fixed width is displayed at the end of the second line 省略号

3.touchableopacity-button/area that can trigger a click event

Available properties:

• onpress={() =>{this.todo ()}}
• Activeopacity={1}
  No hidden effect after clicking Trigger

4.ScrollView and flatlist-scrolling list, many properties, not listed; 5. image-Picture Container

Available 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 StylesComponent = StyleSheet.create({text:{fontSize: 14}，textColor:{color:‘#fff‘}});

2. Four types of styles used:

<Text style={StylesComponent.text}></Text><Text style={{color:‘#fff‘}}></Text><Text style={[StylesComponent.text,{color:‘#fff‘}]}></Text><Text style={[StylesComponent.text,StylesComponent.textColor]}></Text>

3.RN box model: Box-sizing:border-box;

Width includes border and padding

The 4.CSS property is written in camel style, such as fontsize;5. Layout mode is Flexbox, elastic box model

Flexbox in React-native is a subset of Flexbox in CSS3 and does not support all Flexbox properties

6. Common CSS Properties: all the attributes given by the official are as follows,

React-native Valid style props: ["aligncontent", "alignitems",//the style of the parent element, the alignment of the child element in the direction of the current side axis, or, if flexdirection is row, Center indicates that the child element is centered vertically; If the Alignself property is set, the property is overridden by the alignself,//child element style, which sets the alignment "Aspectratio" of the element alone in the side axis direction,//element aspect ratio, RN exclusive, Set the width of the picture, just set this property, you do not need to set the height of the picture "backfacevisibility", "BackgroundColor", "borderBottomColor", " Borderbottomleftradius "," Borderbottomrightradius "," borderBottomWidth "," bordercolor "," borderLeftColor "," borderLeftWidth "," Borderradius "," borderRightColor "," borderRightWidth "," BorderStyle "," borderTopColor "," Borderto Pleftradius "," Bordertoprightradius "," borderTopWidth "," borderWidth "," bottom "," Color "," Decomposedmatrix "," dire Ction "," display ",//Control component display and hide, hidden after no placeholder" elevation "," Flex "," Flexbasis "," flexdirection ",//default is column, child elements are arranged vertically, can be set to row,  The child elements are arranged horizontally "flexgrow", "Flexshrink", "Flexwrap", "fontFamily", "FontSize", "FontStyle", "fontvariant", "FontWeight", "Height", "includefontpadding", "justifycontent", "left", "letterspacing", "Lineheight", "margin", "marginbottom", "Marginhorizontal", "MarginLeft", "MarginRight", "margintop", "Marginver Tical "," MaxHeight "," MaxWidth "," MinHeight "," MinWidth "," opacity "," overflow "," overlaycolor "," padding "," padd Ingbottom "," Paddinghorizontal "," Paddingleft "," paddingright "," Paddingtop "," paddingvertical "," position ",//rn element positioning There are only two types: relative is offset relative to normal document flow, absolute is absolutely positioned relative to the parent element, regardless of whether the parent element is set position property or not, "ResizeMode", (cover picture is full) "right", "rotation "," ScaleX "," ScaleY "," Shadowcolor "," Shadowoffset "," shadowopacity "," Shadowradius "," TextAlign "," Textalignvert ical "," Textdecorationcolor "," Textdecorationline "," Textdecorationstyle "," Textshadowcolor "," Textshadowoffset "," t Extshadowradius "," Tintcolor "," Top "," Transform ", Transform:[{rotate: ' 30deg '},{translate:[-watermarkw,0]}]" Transformmatrix "," TranslateX "," Translatey "," width "," writingdirection "," ZIndex "]

Iii. General layout Scheme 1. Requirements One:

• Layout as Flex layout
• Child elements Horizontal Layout
• and automatically wraps every three elements.
• Distance between two sides 10px
• Median pitch 16px;

The label component implementation code is as follows:

Class Label extends Component {constructor (props) {super (props);  This.state = {selected:false,};    } clicked () {if (this.state.selected) {this.setstate ({selected:false,});    } else {this.setstate ({selected:true,});        }} render () {return (<touchableopacity onpress={() = {this.clicked ();}} activeopacity={1}> <view style={{borderwidth:d (1), width:d (+), height:d (+), Bo            Rderradius:d (2), Alignitems: ' Center ', justifycontent: ' Center ', margintop:d (16), BackgroundColor:this.state.selected? ' #fff ': ' #f5f5f5 ', borderColor:this.state.selected? ' #ff6700 ': ' #f5f5f5 ', marginright: (This.props.index + 1)% 3 = = 0? D (+): D (+),}} > <text style={{color:this.state.selected?  ' #ff6700 ': ' #757575 ',}}        >{this.props.item} </Text> </View> </TouchableOpacity>); }}

2, maxwidth failure

The layout is as follows, maxwidth failure:

<View style={{ maxWidth: 100 }}>    <Text>123</Text></View>

Change the scheme as follows, MaxWidth effective:

<View style={{ flexDirection: ‘row‘, justifyContent: ‘flex-start‘ }}>  <View style={{ maxWidth: 100 }}>    <Text>123</Text>  </View></View>

The reason for this is that 改变了主轴的方向 maxwidth will not take effect until flex is horizontally laid out, but flex defaults to vertical layout;

3., Get TextInput Object

<TextInput  onChange={(e) => { this.onChange(e); }}  ref="textInput"/>

onChange(e) {  console.log(e);// {eventCount:‘‘,target:‘‘,text:‘‘}}

Iv. obtaining the width and position information of the component

React-native gets the dimensions of a component in two ways:

The first method uses the OnLayout property of the element itself to get

But this approach has one limitation:

• 初次渲染This function is only triggered when it is in the
• This method gets the 组件相对于父组件的位置坐标 .

The second way, use the Findnodehandle and Uimanager in react-native to get the dimensions of the component

This encapsulates a layout function, which can be obtained by invoking this function when we need to get the width and height or position information of the component.

• layoutThe function accepts 一个ref参数 that this parameter represents an instance of the component, passes in the instance of the component, and then obtains the component node through the Findnodehandle method.
• UIManager.measureAccepts two parameters,
  • The first parameter is afindNodeHandle获取的组件节点

  • The second argument is to get a successful回调

    • The callback has 6 parameters:
      X, y indicates the relative position of the component
      Width,height indicates the width and height of the component
      Pagex,pagey represents the absolute position of the component relative to the screen.

import { findNodeHandle, UIManager } from ‘react-native‘;

<TextInput  onChange={(e) => { this.onChange(e); }}  ref="textInput"/>

onChange(e) {  this.layout(this.refs.textInput)  .then((item) => {    console.log(item);// 可以在then回调中同步获取数据{x,y,width,height,pageX,pageY}  });}layout(ref) {  const handle = findNodeHandle(ref);  return new Promise((resolve) => {    UIManager.measure(handle,      (x, y, width, height, pageX, pageY) => {      resolve({        x, y, width, height, pageX, pageY,      });    });  });}

React-native--html/css