RN Study Notes (1) View Components

View component

concept

When you create the most basic UI components, most components inherit properties View component. View is a support FlexBox layout, style container, some of the touch processing, and some accessibility features. And can be placed in other views may be any type of a plurality of sub-views. No matter what the platform, View will directly correspond to the native view of a platform, whether it is UIView, div or android.view.View.

The following creates a View, which contains two View

class ViewDemo extends Component {
  render(){
    return(
      <View style={{
        flexDirection:'row',
        height:100,
        padding:20
      }}>
        <View style={{backgroundColor:'red' flex: 0.3}}/>
        <View style={{backgroundColor:'blue' flex: 0.5}}/>
        <Text></Text>
      </View>
    )
  }
}
复制代码

View is designed for use with the StyleSheet, this is the code clearer and higher performance

Common properties

1.style property

View style style property sets, the various properties can be provided, as follows

1.1 FlexBox property

View layout components support FlexBox

1.2 shadow properties

Setting Andrews on the phone with shadow on IOS inconsistent, iOS use shadow property, Android use elevation, but the effect is not good enough, it is recommended to use third-party libraries, react-native-shadow

1.2.1shadow related (iOS)

View component provides four shadow properties, as follows:

• shadowColor set the shadow color value: color
• shadowOffset shadow set displacement value: {width: number, height: number}
• shadowOpacity set the shadow opacity values: number
• shadowRadius Set the shadow blur radius value: number ** Note: ** Set View component of shadow properties does not make sense, define these properties in the View component in order to make its components can inherit each to achieve this effect. Only iOS platform can use the shadow property

1.2.2 elevation(Android)

elevation value number. Android platform is no shadow to shadow set, but can be set indirectly by elevation property shadow. It uses the native Android elevation API to set the height of the assembly, which would appear on the page shadow effect, this effect only supports Android 5.0+

1.3 border-related

• border style borderStyle borderStyle three values, solid (implemented border), dotted (dotted frame), dashed (dotted border)
• borderColor border color can be subdivided into borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, the value for the string
• borderRadius border fillet may be subdivided into borderRadius, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, Top and bottom at the front, left and right at the back , the value for the number

note:

If you do not set borderRadius, borderStyle's dotted and dashed values ​​will fail.

1.4 transform

transform values ​​into four types, translate (translation), scale (zoom), rotate (rotation), skew (inclination). Rotate and skew the difference, rotate while rotating, it will not change the morphology of the component itself, while the skew is changed with the tilt angle, the component will form a corresponding change. View component with the effect of the transform property is not very obvious, most components inherit the transform property View of.

1.5 overflow(iOS)

overflow value is visable, hidden, when the sub-assembly is used to define the width and height of View component behavior over the width and height View components, the default value is hidden, i.e., beyond the hidden portion. oveflow only in the iOS platform is valid, even if the overflow is visable in the Android platform, presented or hidden effect.

1.6 backgroundColor

Set the background color, the default is a very light gray, only Text and TextInput will inherit the background color of the parent component, other components have to set your own background color.

1.7 opacity

opacity value from 0 to 1, when 0 means completely transparent component, is 1, represents a completely opaque component.

2. Touch event callback function

3.removeClippedSubviews

4. Animation Related

Reference links

1. Official documents 2. React Native component (B) View component parses | Liu Wang Shu's blog

Reproduced in: https: //juejin.im/post/5cfdb93fe51d45772a49ad0d