yarn create expo-app

yarn add react-native-web@~0.18.10 react-dom@18.2.0 @expo/webpack-config@^18.0.1

npx react-native init MyApp --template react-native-template-typescript

import { Text, View } from 'react-native'
export default function App() {
  return (
  	<View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <Text>Hello World 🎉</Text>
    </View>
  )
}

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

export default function CoreComponent() {
  return (
    <ScrollView>
      <Text>文本</Text>
      <View>
        <Text>更多文本</Text>
        <Image
          source={{
            uri: 'https://plumbiu.github.io/blogImg/QQavatar.jpg'
          }}
          style={{width: 200, height: 200}}
        />
      </View>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="请输入文本..."
      >
      </TextInput>
    </ScrollView>
  )
}

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

export default function HandleTextInput() {
  const [text, setText] = useState('')
  return (
    <View>
      <TextInput
        onChangeText={word => setText(word)}
        defaultValue={text}
      />
      <Text style={{
        padding: 10,
        fontSize: 50
      }}>
        {
          text.split(' ').map(word => word && '🍕').join(' ')
        }
      </Text>
    </View>
  )
}

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

export default function UsingScrollView() {
  const words = ['hello world', '你好 世界', 'foo bar']
  const logo = {
    uri: 'https://reactnative.dev/img/tiny_logo.png',
    width: 64,
    height: 64,
  }
  return (
    <ScrollView>
      {words.map(item => (
        <Text key={item} style={{ fontSize: 55 }}>{item}</Text>
      ))}
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
      <Image source={logo} />
    </ScrollView>
  )
}

import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
export default function StyleSheetC() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>
        Hello World
      </Text>
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: '#eafeea' 
  },
  title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: '#20232a',
    borderRadius: 6,
    backgroundColor: '#61dafb',
    color: '#20232a',
    textAlign: 'center',
    fontSize: 30,
    fontWeight: 'bold'
  }
})

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

export default function PlatformC() {
  return (
    <View style={styles.container}>
      <Text>PlatformC</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red'
      },
      android: {
        backgroundColor: 'blue'
      },
      default: {
        backgroundColor: 'green'
      }
    })
  }
})

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

export default function ViewDemo() {
  return (
    <View style={styles.viewContainer}>
      <View style={styles.blueView} />
      <View style={styles.redView} />
      <Text>
        Hello World!
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  viewContainer: {
    flexDirection: 'row',
    width: 100,
  },
  blueView: {
    backgroundColor: 'blue',
    width: 50
  },
  redView: {
    backgroundColor: 'red',
    width: 30
  }
})

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

export default function ScrollViewDemo() {
  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100vw'
  },
  scrollView: {
    marginHorizontal: 20,
  },
  text: {
    fontSize: 42
  }
})

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

export default function SwitchDemo() {
  const [isEnabled, setIsEnabled] = useState(false)
  const toggleSwitch = () => {
    setIsEnabled(prevState => !prevState)
  }
  return (
    <View style={styles.container}>
      <Switch
        style={{ height: 50 }}
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={isEnabled ? '#f5ff4b' : '#f4f3f4'}
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

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

export default function TextDemo() {
  return (
    <View>
      <Text style={styles.baseText}>
        基本文字
        <Text style={styles.innerText}>红色文字</Text>
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  baseText: {
    fontWeight: 'bold'
  },
  innerText: {
    color: 'red'
  }
})

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

export default function TextInputDemo() {
  const [text, setText] = useState('')
  return (
    <TextInput
      value={text}
      onChangeText={text => setText(text)}
      style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
    />
  )
}

import { View, Text, KeyboardAvoidingView, Platform, TextInput, Button } from 'react-native'
import React from 'react'

export default function KeyboardAvoidingViewDemo() {
  return (
    <KeyboardAvoidingView
      behavior={ Platform.OS === 'ios' ? 'padding' : 'height' }
    >
      <View>
        <Text>Header</Text>
        <TextInput placeholder='username'></TextInput>
        <Button title='Submit' onPreSS={() => null} />
      </View>
    </KeyboardAvoidingView>
  )
}

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

export default function ButtonC() {
  return (
    <View>
      <Button
        title='Press me'
        onPress={() => alert('Button was pressed')}
      />
    </View>
  )
}

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

export default function ImageDemo() {
  return (
    <View>
      <Image
        style={styles.avatar}
        source={{
          uri: 'https://plumbiu.github.io/blogImg/QQavatar.jpg'
        }}
      />
    </View>
  )
}
const styles = StyleSheet.create({
  avatar: {
    width: 50,
    height: 50
  }
})

source={require('@expo/snack-static/react-native-logo.png')}

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

export default function ImageBackgroundDemo() {
  return (
    <View>
      <ImageBackground
        style={styles.avatar}
        source={{
          uri: 'https://plumbiu.github.io/blogImg/QQavatar.jpg'
        }}
      >
        <Text style={styles.textInsideAvatar}>ImageBackgroundDemo</Text>
      </ImageBackground>
    </View>
  )
}

const styles = StyleSheet.create({
  avatar: {
    width: 200,
    height: 200
  },
  textInsideAvatar: {
    height: 50,
    padding: 20,
    color: 'white',
    margin: 'auto',
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  }
})

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

export default function ActivityIndicatorC() {
  return (
    <View>
      <ActivityIndicator />
      <ActivityIndicator size="large" />
      <ActivityIndicator size="small" color="#0000ff" />
      <ActivityIndicator size="large" color="#ff0000" />
    </View>
  )
}

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

export default function TouchableHighlightDemo() {
  return (
    <TouchableHighlight
      activeOpacity={0.6}
      underlayColor='#dddddd'
      onPress={() => alert('Pressed!')}
    >
      <View>
        <Text>Touch Me</Text>
      </View>
    </TouchableHighlight>
  )
}

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

export default function TouchableOpacityDemo() {
  const [count, setCount] = useState(0)
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.countText}>{count}</Text>
      </View>
      <TouchableOpacity
        style={styles.btn}
        onPress={() => setCount(count + 1)}
      >
        <Text style={styles.btnText}>Press me</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  countText: {
    marginBottom: 20,
    fontSize: 50
  },
  btn: {
    padding: 10,
    backgroundColor: '#8944fe',
    borderRadius: 10
  },
  btnText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold'
  }
})

import React, { useState } from 'react'
import { Modal, StyleSheet, Text, TouchableHighlight, View } from 'react-native'

const ModalDemo = () => {
  const [modalVisible, setModalVisible] = useState(false)
  return (
    <View style={styles.container}>
      <Modal visible={modalVisible} animationType="slide">
        <View style={styles.modalView}>
          <View style={styles.modalContent}>
            <Text style={styles.modalText}>Hello</Text>
            <TouchableHighlight
              activeOpacity={0.85}
              underlayColor="#8755fe"
              onPress={() => setModalVisible(false)}
              style={styles.divBtn}
            >
              <Text style={styles.BasicText}>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
      <TouchableHighlight
        activeOpacity={0.85}
        underlayColor="#8755fe"
        onPress={() => setModalVisible(true)}
        style={styles.divBtn}
      >
        <Text style={styles.BasicText}>Show Modal</Text>
      </TouchableHighlight>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    padding: 40,
    backgroundColor: 'rgba(0, 0, 0, .1)',
    alignItems: 'center',
    borderRadius: 15
  },
  modalText: {
    fontSize: 50,
    color: '#333',
    marginBottom: 10
  },
  divBtn: {
    padding: 20,
    backgroundColor: '#4554fe',
    justifyContent: 'center',
    borderRadius: 15,
  },
  BasicText: {
    color: 'white',
    fontWeight: 'bold',
  },
})

export default ModalDemo

export default function UsingListViews() {
  const flatlistData = [
    { text: 'hello' },
    { text: 'world' },
    { text: 'foo' },
    { text: 'bar' }
  ]
  return (
    <View>
      <FlatList
        data={flatlistData}
        renderItem={({ item }) => <Text key={item.text}>{item.text}</Text>}
      />
    </View>
  )
}

renderItem({
  item: itemT,
  index: number,
  separators: {
    hightlight: () => void;
    unhighlight: () => void;
  	updateProps: (select: 'leading' | 'trailing', newProps: any) => void
  }
}): JSX.Element

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

export default function SectionListDemo() {
  const sectionList = [
    { id: '1', title: 'one', data: ['1', '一'] },
    { id: '2', title: 'two', data: ['2', '二'] },
    { id: '3', title: 'three', data: ['3', '三'] },
    { id: '4', title: 'four', data: ['4', '四'] }
  ]
  return (
    <SectionList
      sections={sectionList}
      renderItem={({ item }) => (
        <Text>{item}</Text>
      )}
      renderSectionHeader={({ section }) => (
        <Text style={styles.blodText}>{section.title}</Text>
      )}
      // keyExtractor={(item) => item}
    />
  )
}

const styles = StyleSheet.create({
  blodText: {
    fontWeight: 'bold'
  }
})

import {
  View,
  Text,
  ScrollView,
  RefreshControl,
  StyleSheet,
} from 'react-native'
import React, { useState } from 'react'

export default function RefreshControlDemo() {
  const [isRefresh, setIsRefresh] = useState(false)
  const handleRefresh = () => {
    setIsRefresh(true)
    setTimeout(() => {
      setIsRefresh(false)
    }, 2000)
  }
  return (
    <View style={styles.container}>
      <ScrollView
        refreshControl={<RefreshControl refreshing={isRefresh} onRefresh={handleRefresh} />}
      >
        <Text>Pull Down</Text>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'skyblue',
    justifyContent: 'center',
    alignItems: 'center',
  }
})

import { View, Text, StatusBar, Button, StyleSheet } from 'react-native'
import React, { useState } from 'react'

export default function StatusBarDemp() {
  const sytleTypes = ['default', 'dark-content', 'light-content']
  const [visibleStatusBar, setVisibleStatusBar] = useState(false)
  const [styleStatusBar, setStyleStatusBar] = useState(sytleTypes[0])
  const themeHandler = () => {
    const typeID = sytleTypes.indexOf(styleStatusBar) + 1
    if(typeID === sytleTypes.length)
      setStyleStatusBar(sytleTypes[0])
    else
      setStyleStatusBar(sytleTypes[typeID])
  }
  return (
    <View style={styles.container}>
      <Text>
        <StatusBar
          hidden={visibleStatusBar}
        />
        <StatusBar
          backgroundColor="blue"
          barStyle={styleStatusBar}
        />
        <View>
          <Button
            title={ visibleStatusBar ? 'show statusbar' : 'hide statusbar' }
            onPress={() => setVisibleStatusBar(!visibleStatusBar)}
          />
          <Button
            title='change theme'
            onPress={themeHandler}
          />
          
        </View>
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

import { View, Text, Button, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { Pressable } from 'react-native'

export default function PressableDemo() {
  const [counter, setCounter] = useState(0)
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => setCounter(counter + 1)}
        onLongPress={() => setCounter(counter + 2)}
        style={({ pressed }) => [
          {
            backgroundColor: pressed ? 'rgba(120, 20, 240, 1)' : 'rgba(120, 20, 240, 0.5)',
            borderRadius: 25
          }
        ]}
      >
        {({ pressed }) => (
          <Text style={styles.textBtn}>{pressed ? 'Pressed!' : 'Press Me!'}</Text>
        )}
      </Pressable>
      <View style={styles.textContent}>
        <Text>{counter ? `${ counter === 1 ? 'onPress' : `${counter}x onPress` }` : ''}</Text>
      </View>
    </View>
  )
}
const textBasicStyle = {
  width: '100vw',
  textAlign: 'center',
  padding: 15,
  fontSize: 25,
  color: '#fff'
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textBtn: {
    ...textBasicStyle
  },
  textContent: {
    ...textBasicStyle,
    backgroundColor: 'rgba(200, 200, 200, .35)',
    marginTop: 25,
    fontSize: 20
  }
})

import {
  View,
  Text,
  DrawerLayoutAndroid,
  Button,
  FlatList,
  StyleSheet,
} from 'react-native'
import React, { useState } from 'react'

export default function DrawerLayoutAndroidDemo() {
  const [drawerPosition, setDrawerPosition] = useState('left')
  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      renderNavigationView={() => (
        <FlatList
          data={[
            { id: 1, name: 'xj', age: 20 },
            { id: 2, name: 'sx', age: 20 },
            { id: 3, name: 'yq', age: 21 },
          ]}
          renderItem={({ item }) => (
            <View style={{...styles.container, ...styles.drawerContainer}}>
              <Text>姓名：{item.name}</Text>
              <Text>年龄：{item.age}</Text>
            </View>
          )}
        />
      )}
      drawerPosition={drawerPosition}
    >
      <View style={styles.container}>
        <Text>The Drawer Position {drawerPosition}</Text>
        <Button
          title="change the drawer position"
          onPress={() =>
            setDrawerPosition(drawerPosition === 'left' ? 'right' : 'left')
          }
        />
      </View>
    </DrawerLayoutAndroid>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  drawerContainer: {
    marginTop: 25
  }
})

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

export default function AlertDemo() {
  function createBtnAlert() {
    Alert.alert(
      'Alert 标题',
      'Alert 内容',
      [
        {
          text: 'cancel',
          onPress: () => console.log('cancel!'),
          style: 'cancel'
        },
        { text: 'ok', onPress: () => console.log('ok!!') }
      ]
    )
  }
  return (
    <View style={styles.container}>
      <Button
        title='Press me'
        onPress={createBtnAlert}
      />
    </View>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

const fadeAdim = new Animated.Value(0)

<Animated.View style={[
  { opacity: fadeAdim }
]}>
	<Text>动画显示内容</Text>
</Animated.View>

const fadeIn = () => {
	Animated.timing(fadeAdim, {
    toValue: 1, // duration 时间后动画实例的值
    duration: 5000 // 动画持续的时间，单位 ms
  })
}.start()

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

export default function AnimatedDemo() {
  const fadeAdim = new Animated.Value(0)
  const fadeIn = () => {
    Animated.timing(fadeAdim, {
      toValue: 1,
      duration: 5000
    }).start()
  }
  const fadeOut = () => {
    Animated.timing(fadeAdim, {
      toValue: 0,
      duration: 5000
    }).start()
  }
  return (
    <View>
      <Animated.View
        style={[
          {
            opacity: fadeAdim
          }
        ]}
      >
        <Text>Animted View</Text>
      </Animated.View>
      <View>
        <Button title="Fade In" onPress={fadeIn} />
        <Button title="Fade Out" onPress={fadeOut} />
      </View>
    </View>
  )
}

const fadeAdim = useRef(new Animated.Value(0)).current

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

export default function AppearanceDemo() {
  const colorScheme = Appearance.getColorScheme()
  return (
    <View>
      <Text>{colorScheme}</Text>
    </View>
  )
}

static addChangeListener(
	listener: (preferences: { colorScheme: 'light' | 'dark' | null }) => void
): NativeEventSubscription

import { View, Text } from 'react-native'
import React, { useEffect, useRef, useState } from 'react'
import { AppState } from 'react-native'

export default function AppStateDemo() {
  const appState = useRef(AppState.currentState)
  const [appStateVisible, setAppStateVisible] = useState(appState.current)
  const [words, setWords] = useState('first state')
  useEffect(() => {
    const subsciption = AppState.addEventListener('change', (nextAppState) => {
      if(appState.current.match(/inactive|background/) && nextAppState === 'active') {
        setWords('App has come to the foreground!')
      }
      appState.current = nextAppState
      setAppStateVisible(appState.current)
      console.log('AppState', appState.current)
    })
    return () => {
      subsciption.remove()
    }
  }, [])
  return (
    <View>
      <Text>{words}</Text>
      <Text>Current state is: {appStateVisible}</Text>
    </View>
  )
}

static addMenuItem(title: string, handler: () => any)

DevSettings.addMenuItem('展示 dev', () => {
	Alert.alert('开发环境调用！')
})

static reload(reason?: string): void

<Button title="Reload" onPress={() => DevSettings}

const windowWidth = Dimensions.get('window').width
const windowHeight = Dimensions.get('window').hei

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

const windowDimensions = Dimensions.get('window')
const screenDimensions = Dimensions.get('screen')

export default function DimensionsDemo() {
  const [dimensions, setDimensions] = useState({
    window: windowDimensions,
    screen: screenDimensions
  })
  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window, screen }) => {
      setDimensions({ window, screen })
    })
    return () => {
      subscription?.remove()
    }
  }, [])
  return (
    <View>
      <Text>Window Dimensions</Text>
      {
        Object.entries(dimensions.window).map(([key, value]) => (
          <Text key={key}>{key} - {value}</Text>
        ))
      }
      <Text>
        {
          Object.entries(dimensions.screen).map(([key, value]) => (
            <Text key={key}>{key} - {value}</Text>
          ))
        }
      </Text>
    </View>
  )
}

static addEventListener(
	type: 'change',
  handler: ({
  	window,
  	screen
  }: DimensionsValue) => void
): EmitterSubscription

static get(dim: 'window' | 'screen'): ScaledSize

const { height, width } = Dimension.get('window')

const size = opacity.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 80]
})