This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

Full screen status bar

import { View, Text, Image, StatusBar } from 'react-native'
<StatusBar backgroundColor="transparent" translucent={ true } />
Copy the code

JSX: The code format for writing components in React. The full name is JavaScript XML

import React from 'react'
import { View, Text } from 'react-native'

const App = () => <View>
  <Text>JSX Hello World</Text>
</View>

export default App
Copy the code

RN Style (focusing on the differences with Web development)

Import {Dimensions} from 'react-native' const screenWidth = math.round (Dimensions. Set ('window').width) const < span style={{transform: [{{transformatey: 300}, {scale: 50; 2}}}> </Text>Copy the code

The label

  1. View
  2. Text
  3. TouchableOpacity
  4. Image
  5. ImageBackground
  6. TextInput
  7. Other = >
    1. button
    2. FlatList
    3. ScrollView
    4. StatusBar
    5. TextInput

View

  1. Equivalent to divs in the old Web
  2. Font size, font color and so on are not supported
  3. You cannot put text content directly
  4. Direct binding of click events is not supported (usually use TouchableOpactiy instead)

Text

  1. Text label, you can set font color, size, etc
  2. Support for binding click events

TouchableOpacity (onpress => Click => Click event)

You can bind a block-level label to a click event

  1. It’s a block-level container
  2. Support for binding click event onPress
  3. You can set the transparency when you click
import React from 'react' import {TouchableOpacity, Text} from 'react-native' const handlePress = () => { alert('111') } const App = () => <TouchableOpacity ActiveOpacity ={0} onPress={handlePress}> <Text> Click the event </Text> </TouchableOpacity> export default AppCopy the code

Image rendering

1. When rendering a local image

<Image source={ require(".. /gril.png") } />Copy the code

2. When rendering web images, you must add width and height

<Image source={{ uri: 'https://timgsa.baidu.com/xxx.png }} style={{ width: 200, height: 300 }} />
Copy the code

3. Support GIF and WebP images on Android

Android does not support GIF and Webp formats by default, just add them manually in the Android /app/build.gradle file as needed

The following modules:

Dependencies {/ / if you need to support android4.0 (API level 14) version before implementation 'com. Facebook. Fresco ": animated - base - support: 1.3.0' / / if you need to support the GIF animation implementation 'com. Facebook. Fresco ": animated - GIF: 2.0.0' / / if you need support webp, Including dynamic figure webp implementation 'com. Facebook. Fresco ": animated - webp: 2.1.0' implementation 'com. Facebook. Fresco" : webpsupport: 2.0.0' / / if you only need to support the webp implementation without the need for a dynamic diagram 'com. Facebook. Fresco ": websupport: 2.0.0'}Copy the code

ImageBackground

A container that can use an image as a background, equivalent to the previous div + background image

import React from 'react'
import { Text, ImageBackground } from 'react-native'

const App = () => 
  <ImageBackground source={require('./assets/logo.png')} style={{ width: 200, height: 200 }}>
    <Text>Inside</Text>
  </ImageBackground>

export default App
Copy the code

TextInput Input box component

The value syntax of the input box can be obtained via the onChangeText event:

  1. component
  2. Interpolation expression
  3. State of the state
  4. Properties props
  5. debugging
  6. The event
  7. The life cycle
import React from 'react' import { TextInput } from 'react-native' const handleChangeText = (text) => { alert(text) } Const App = () => <TextInput onChangeText={handleChangeText} /> Export Default AppCopy the code

Curly braces {} can directly add JS code inside

Component: function component, class component

Function component

  1. No state (allowed by hooks)
  2. No life cycle (available via hooks)
  3. Suitable for simple scenarios

Class components

  1. Suitable for complex scenarios
  2. With the state
  3. There is a life cycle

Properties props (passed to the parent component) and slot

import React from 'react' import { View, Text } from 'react-native' const App = () => ( <View> <Text>==========</Text> <Sub color="red"> < View > < Text > 1234 < / Text > < View > < / Sub > < Text > = = = = = = = = = = < / Text > < View >) / / subcomponents props const Sub = (props) = > (< View > < Text Style ={{color: props. Color}}>{props. Children}</Text></View>Copy the code

People are lazy, do not want to picture, are their own blog content (dry goods), hope to help everyone

Public number: xiao He growth, The Buddha department more text, are their own once stepped on the pit or is learned

Interested partners welcome to pay attention to me, I am: He young life. Everybody progress duck together