React Native

# 全局安装脚手架
npm install -g expo-cli

# 创建项目
expo init MyApp
cd MyApp
# 启动项目 yarn start
expo start

# 直接创建项目
npx create-expo-app@latest

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press w │ open web   # 打开浏览器

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor  # 打开编辑器

› Press ? │ show all commands

# 全局安装脚手架
npm install -g react-native-cli

# 创建项目
npx react-native init MyApp
cd MyApp
# 启动项目
npx react-native run-ios
npx react-native run-android
# 启动模拟器后时间可能有点长，需要等待
# 创建项目目录 src/compnonents src/routes src/screens src/utils

# 添加项目依赖
yarn add react-native-elements react-native-vector-icons react-native-safe-area-context

npm install -g @react-native-community/cli
npx react-native init MyApp

import React, {useState} from 'react';
import { View, Text, StyleSheet, SafeAreaView, Image,
 ImageBackground, TextInput, ScrollView,} from 'react-native';
import {Button} from 'react-native-elements';
const logo = 'https://zh-hans.reactjs.org/logo-og.png';

export default function App() {
 const [count, setCount] = useState(0);
 const [text, setText] = useState('default');
 return (
  <SafeAreaView>
    <ScrollView>
      <Text>App</Text>
      <Image source={{uri: logo}} style={styles.logo}/>
      <ImageBackground source={{uri: logo}} style={styles.logo}>
      <Text style={{color: 'white'}}>Inside</Text>
      </ImageBackground>
      <Button title={count + ''}
      onPress={() => setCount(count + 1)}
      buttonStyle={styles.btn}/>
      <TextInput value={text}
      onChangeText={txt => setText(txt)}
      style={styles.txt}/>
      <Text style={[styles.txt, {borderColor:'green'}]}>
        <Text style={styles.bold}>⽂本: </Text>
        <Text>{text}</Text>
      </Text>
      <View style={[styles.txt, {borderColor:'green'}]}>
        <Text style={styles.bold}>⽂本: </Text>
        <Text>{text}</Text>
      </View>
      {/* //! 溢出 */}
      <Text>omg:</Text>
      <Text numberOfLines={1}>{'书名'.repeat(100)}</Text>
      {/* <Text>{'书名'.repeat(1000)}</Text> */}
    </ScrollView>
  </SafeAreaView>
 );
}

const styles = StyleSheet.create({
 logo: {
  width: 100,
  height: 100,
 },
 btn: {
  width: 100,
  height: 100,
  backgroundColor: 'red',
 },
 txt: {
  width: 100,
  height: 100,
  backgroundColor: 'yellow',
 },
 bold: {
   fontWeight: 'bold',
 },
});

import Dimensions from 'react-native-dimensions';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: Dimensions.get('window').width/4, // 获取屏幕宽度设置几分之一
    height:100
  },
  text: {
    fontSize: 20,
    color: '#000',
  },
});

yarn add @react-navigation/native react-native-screens react-native-safe-area-context

// app.js
import React from 'react';
import {NavigationContainer} from '@reactnavigation/native';
import RootRouter from './RootRouter';

export deault function App () {
 return (
 <NavigationContainer>
 <RootRouter />
 </NavigationContainer>
 );
}

// RootRouter.js
import React from 'react';
import {View, Text} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import HomeScreen from '@/screens/HomeScreen';
import UserScreen from '@/screens/UserScreen';

const {Screen, Navigator} =createNativeStackNavigator();
export default function RootRouter() {
 return (
 // ! SafeAreaView不能写这⾥
 // <SafeAreaView>
 <Navigator>
 <Screen name="home" component={HomeScreen} />
 <Screen name="user"
 component={UserScreen}
 options={{title: '⽤户中⼼'}}
 initialParams={{name: '我是⼩明'}}
 />
 </Navigator>
 // </SafeAreaView>
 );
}

// Link跳转
<Link to={{screen: 'user', params: {id: 'jane'}}}>
 Go to Jane's profile
</Link>

// navigation.navigate('home', {screen: 'home', params: {id: 'jane'}});
// 事件跳转
<Button
 title="go home"
 onPress={() => {
 // navigation.push('home');
 // navigation.navigate('home');
 }}
 />

import {Platform, StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  height: Platform.OS === 'ios' ? 200 : 100,
});

import {Platform, StyleSheet} from 'react-native';

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

const Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;

import {Platform} from 'react-native';

if (Platform.Version === 25) {
  console.log('Running on Nougat!');
}

# 不同平台组件
BigButton.ios.js
BigButton.android.js

import BigButton from './BigButton';