移動應(yīng)用基本不會只由一個頁面組成。管理多個頁面的呈現(xiàn)麻敌、跳轉(zhuǎn)的組件就是我們通常所說的導(dǎo)航器（navigator）圆裕。React Navigation 提供了簡單易用的跨平臺導(dǎo)航方案取逾，在 iOS 和 Android 上都可以進(jìn)行翻頁式蜓竹、tab 選項(xiàng)卡式和抽屜式的導(dǎo)航布局箕母。

官方文檔

安裝

npm install @react-navigation/native    原生導(dǎo)航
npm install @react-navigation/stack     堆棧導(dǎo)航
npm install @react-navigation/bottom-tabs   底部導(dǎo)航
npm install @react-navigation/material-top-tabs react-native-tab-view   頂部安卓導(dǎo)航

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view    依賴

配置

將以下兩行添加到中的dependencies部分android/app/build.gradle

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

堆棧導(dǎo)航

• NavigationContainer 路由容器
• createStackNavigator 創(chuàng)建堆棧導(dǎo)航方法

1. 導(dǎo)入組件

// 導(dǎo)入導(dǎo)航容器
import { NavigationContainer } from '@react-navigation/native';
// 導(dǎo)入創(chuàng)建堆棧導(dǎo)航方法
import { createStackNavigator } from '@react-navigation/stack';

2. 創(chuàng)建導(dǎo)航

const Stack = createStackNavigator();

3. 創(chuàng)建導(dǎo)航視圖

function Home() {
  return (
    <View>
      <Text>首頁</Text>
    </View>
  );
}

function Details() {
  return (
    <View>
      <Text>詳情頁面</Text>
    </View>
  );
}

4. 包裝頁面

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

導(dǎo)航跳轉(zhuǎn)

• navigation.push('Details') 切換頁面
• navigation.replace('Details') 替換頁面
• navigation.goBack() 返回
• navigation.popToTop() 回到最頂層頁

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')} />
        <Button
        title="再一次跳轉(zhuǎn)詳情"
        onPress={() => navigation.push('Details')} />
        <Button 
            title="返回" 
            onPress={() => navigation.goBack()} />
        <Button
            title="回到頂層"
            onPress={() => navigation.popToTop()} />
    </View>
  );
}

導(dǎo)航傳參

傳遞參數(shù)

<Button
    title="跳轉(zhuǎn)到詳情"
    onPress={() => {
        navigation.navigate('Details', {
            itemId: 86,
            otherParam: '你想傳遞參數(shù)',
        });
    }}
/>

接收參數(shù)

通過props的route.params中獲取參數(shù)

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (...)
}

初始化參數(shù)

 <Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42 }}
/>

配置標(biāo)題

設(shè)置標(biāo)題

<Stack.Screen
   name="Home"
   component={HomeScreen}
   options={{ title: '首頁' }}
/>

更新options

<Button
  title="更新標(biāo)題"
  onPress={() => navigation.setOptions({ title: '新標(biāo)題' })}
/>

標(biāo)題樣式

<Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{
      title: 'My home',
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
      />

options跨屏幕共享

<Stack.Navigator
  screenOptions={{
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  }}
>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'My home' }}
  />
</Stack.Navigator>

用自定義組件替換標(biāo)題

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <image source={}>}}
      />
    </Stack.Navigator>
  );
}

標(biāo)題按鈕

<Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerRight: () => (
            <Button
              onPress={() => alert('設(shè)置被點(diǎn)擊')}
              title="設(shè)置"
              color="#fff"
            />
          ),
        }}
/>

StackNavigator navigationOptions 導(dǎo)航頁面的屬性和方法

title       - 可用作的headerBackTitle的標(biāo)題。

header      - 函數(shù)返回一個React元素俱济，用來作為標(biāo)題嘶是。設(shè)置null會隱藏標(biāo)題。
headerRight - 接受React Element將會顯示在標(biāo)題的右側(cè)
headerStyle - 頂部欄的樣式
headerTitleStyle - 標(biāo)題組件的樣式

擴(kuò)展

navigationOptions 標(biāo)簽欄的屬性和方法

title - 通用標(biāo)題可以用作headerTitle和tabBarLabel蛛碌。

tabBarVisible - 顯示或隱藏底部標(biāo)簽欄聂喇，默認(rèn)為true，不隱藏左医。

tabBarIcon - React Element或給定{focused：boolean授帕，tintColor：string}的函數(shù)返回一個React.Node，用來顯示在標(biāo)簽欄中浮梢。

tabBarLabel - 接收字符串跛十、React Element或者給定{focused：boolean，tintColor：string}的函數(shù)返回一個React.Node秕硝，用來顯示在標(biāo)簽欄中芥映。如果未定義，會使用title作為默認(rèn)值远豺。如果想要隱藏奈偏，可以參考上面的tabBarOptions.showLabel。

tabBarOnPress - 標(biāo)簽欄點(diǎn)擊事件回調(diào)躯护，接受一個對象惊来，其中包含如下：

image

tabBarOnPress: async (obj: any) => {
console.log(obj);
    try {
        const userData = await AsyncStorage.getItem('USER_INFO');
        if (userData) {
            obj.defaultHandler();
        }
        else {
            obj.navigation.navigate('Login');
        }
    } catch (e) {
        Toast.show(e.message, 'center', 1000);
    }
}

react-native是面向組件的開發(fā)，基礎(chǔ)知識相對簡單棺滞，我們只需先迅速掌握主干知識裁蚁，在以后的開發(fā)中就有了開枝散葉的資本。

項(xiàng)目結(jié)構(gòu)

• 面向組件的開發(fā)继准，初始化工程內(nèi)容結(jié)構(gòu)

/**************組件導(dǎo)入**************/ 
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    ImageBackground,
} from 'react-native';

/**************平臺區(qū)分 ios 和 android**************/ 
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

/************渲染 相當(dāng)于viewDidload**************/
  render() {
/**返回顯示的內(nèi)容**/
    return (
      <View style={styles.container}>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

/************布局樣式************/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

• 工程目錄介紹枉证，新版入口已經(jīng)統(tǒng)一在index.js里面了

  image
  • GitHub如何運(yùn)行

  $npm install
  $react-native run-ios /react-native run-andriod
  
  

• 平常開發(fā)目錄結(jié)構(gòu)

.
├── andoird/    
├── ios/    
├── src/    // 項(xiàng)目頁面
│   ├── index.js        // 注冊原生應(yīng)用入口
│   ├── App.js          // 首頁
│   ├── components/     // 各類組件
│   ├── pages/          // 頁面
│   ├── images/         // 圖片
│   ├── config/         // 項(xiàng)目配置內(nèi)容
│   ├── logic/          // 項(xiàng)目邏輯
│   └── utils/          // 項(xiàng)目共計(jì)
└── network             // 網(wǎng)絡(luò)服務(wù)
    └── DataService.js
.
├── components    //組成應(yīng)用的各個組件
│   ├── Routers.android.js     //每個組件若實(shí)現(xiàn)不一樣，分為android的實(shí)現(xiàn)和ios的實(shí)現(xiàn)移必。
│   ├── Routers.ios.js
│   ├── common       //公共組件
│   ├── issues       //議題頁面
│   ├── navigation   //導(dǎo)航組件室谚，android用側(cè)邊欄，ios準(zhǔn)備用tab
│   └── project      //項(xiàng)目頁面
└── network          //網(wǎng)絡(luò)服務(wù)
    └── DataService.js
根據(jù)項(xiàng)目具體內(nèi)容調(diào)節(jié)崔泵。秒赤。。

調(diào)試

• 模擬器調(diào)試
  • 數(shù)據(jù)刷新 iOS模擬器 command+R 刷新憎瘸，command+D呼出操作菜單
    Android模擬器 RR刷新數(shù)據(jù)倒脓，點(diǎn)擊右側(cè)菜單按鈕呼出菜單
• 真機(jī)調(diào)試（電腦和手機(jī)設(shè)備在同一個Wifi網(wǎng)絡(luò)環(huán)境下）
  • iOS
    • 配置電腦的IP地址
      找到 RCTWebSocketExecutor.m 里面的 localhost 設(shè)置為你的電腦的IP地址
    • 修改Bundle ID : 不改很有可能報(bào)錯!
    • Test 的Team也需要設(shè)置
    • 手機(jī)搖一搖呼出操作菜單
  • Android
    • 在開發(fā)者選項(xiàng)里打開USB調(diào)試
    • 在cmd命令行或Cygwin輸入adb devices就可以看到設(shè)備已連接
    • 運(yùn)行RN項(xiàng)目時(shí)，手機(jī)和電腦USB連接并且電腦和手機(jī)設(shè)備在同一個Wifi網(wǎng)絡(luò)環(huán)境下
    • 手機(jī)搖一搖呼出操作菜單

布局和樣式 （示例工程在末尾）

• 彈性（Flex）寬高

  • 最簡單的給組件設(shè)定尺寸的方式就是在樣式中指定固定的width和height含思。React Native中的尺寸都是無單位的崎弃，表示的是與設(shè)備像素密度無關(guān)的邏輯像素點(diǎn)。（像素含潘、物理像素饲做、邏輯像素的關(guān)系看這里）
  • 在組件樣式中使用flex可以使其在可利用的空間中動態(tài)地?cái)U(kuò)張或收縮。一般而言我們會使用flex:1來指定某個組件擴(kuò)張以撐滿所有剩余的空間遏弱。如果有多個并列的子組件使用了flex:1盆均，則這些子組件會平分父容器中剩余的空間。如果這些并列的子組件的flex值不一樣漱逸，則誰的值更大泪姨，誰占據(jù)剩余空間的比例就更大（即占據(jù)剩余空間的比等于并列組件間flex值的比）游沿。
  • 組件能夠撐滿剩余空間的前提是其父容器的尺寸不為零。如果父容器既沒有固定的width和height肮砾，也沒有設(shè)定flex诀黍，則父容器的尺寸為零。其子組件如果使用了flex仗处，也是無法顯示的眯勾。

• Flexbox布局

  • Flex Direction
    在組件的style中指定flexDirection可以決定布局的主軸。子元素是應(yīng)該沿著水平軸(row)方向排列婆誓，還是沿著豎直軸(column)方向排列呢吃环？默認(rèn)值是豎直軸(column)方向。

    image
    image

  • Justify Content

    在組件的style中指定justifyContent可以決定其子元素沿著主軸的排列方式洋幻。子元素是應(yīng)該靠近主軸的起始端還是末尾段分布呢郁轻？亦或應(yīng)該均勻分布？對應(yīng)的這些可選項(xiàng)有：flex-start文留、center范咨、flex-end、space-around以及space-between厂庇。

    image

  • Align Items
    在組件的style中指定alignItems可以決定其子元素沿著次軸（與主軸垂直的軸渠啊，比如若主軸方向?yàn)閞ow，則次軸方向?yàn)閏olumn）的排列方式权旷。子元素是應(yīng)該靠近次軸的起始端還是末尾段分布呢替蛉？亦或應(yīng)該均勻分布？對應(yīng)的這些可選項(xiàng)有：flex-start拄氯、center躲查、flex-end以及stretch。

    注意：要使stretch選項(xiàng)生效的話译柏，子元素在次軸方向上不能有固定的尺寸镣煮。

    image

• 界面樣式

/*******************內(nèi)聯(lián)************************/
<View style={{flex: 1, backgroundColor: 'powderblue'}} />

/*******************外聯(lián)************************/
<View style={styles.MyStyle}>
    <Text style={styles.instructions}>
       flexbox我是第一個View
    </Text>
</View>

// 樣式定義
const styles = StyleSheet.create({

   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },// 不同樣式間逗號隔開
   MyStyle:{
       flex:1,
       backgroundColor:'red',
       flexDirection:'row', //主軸方向
       justifyContent:'space-around',// 主軸方向的對齊方式
       alignItems:'flex-end',// 次軸方向的對齊方式
   }
});

編寫各式各樣的UI

• 靜態(tài)界面
  Text、Image鄙麦、View典唇、props
• 登錄界面實(shí)戰(zhàn)練習(xí)(見下面示例工程)
• 動態(tài)界面
  要學(xué)習(xí)如何動態(tài)修改你的界面，那就需要進(jìn)一步
  學(xué)習(xí)State（狀態(tài)）的概念

分辨率

// 獲取屏幕寬高分辨率
var Dimensions = require('Dimensions');
let screenwidth  = Dimensions.get('window').width;
let screenheight = Dimensions.get('window').height;
let screenheight = Dimensions.get('window').scale;

iOS和Android區(qū)分

React Native提供了一個Platform模塊用于檢測當(dāng)前運(yùn)行app的平臺胯府。你可以根據(jù)這個檢測邏輯去應(yīng)用對應(yīng)的針對特定平臺的代碼介衔。

• Platform.OS
  如果一個組件中只有一小部分代碼是針對特定平臺的，可以使用這種方式骂因。

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

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

• Platform.select（Platform.select方法的key（ios炎咖、android）對應(yīng)的value可以是任意的value）

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 />;

• 針對特定平臺的文件擴(kuò)展名
  • 如果你針對特定平臺的代碼比較復(fù)雜的話，你應(yīng)該考慮將它們拆分到獨(dú)立的文件中。
  • 當(dāng)一個組件要加載的另外一個組件對應(yīng)的文件名有
    .ios.或.android.
    擴(kuò)展名時(shí)React Native會根據(jù)當(dāng)前所處平臺來加載對應(yīng)的文件乘盼。
  • 比如說升熊，如果你的項(xiàng)目中有以下兩個文件：
    BigButton.ios.js
    BigButton.android.js
    然后你可以用下面這種方式去引入組件：
    const BigButton = require('./BigButton');
    這樣子，React Native就會根據(jù)當(dāng)前運(yùn)行app的平臺來自動加載對應(yīng)的文件了绸栅。

react-native生命周期

export default class Test extends Component {
    state={
        title:'默認(rèn)值',
        person:'Hank'
    }
    static defaultProps={
        age:18
    }
    //
    render() {
        return (
            <View ref="topView" style={styles.container}>
                <Text>{this.state.person}</Text>
                <Text>{this.props.age}</Text>
                <Button title="我就是個Button"
                        color="red"
                        onPress={()=>this.click('點(diǎn)擊')}
                />
            </View>
        );
    }
    click(event){
        //
        this.setState({
            title:event
        });
        //拿到View
        console.log(this.refs.topView)
    }
        //相當(dāng)于OC中的ViewWillAppear
    componentWillMount(){
        //AlertIOS.alert('WillMount來了')
    }

    //哥么Render之后 -- 今后用來發(fā)送網(wǎng)絡(luò)請求(第一次加載的數(shù)據(jù))
    componentDidMount(){
        // AlertIOS.alert('DidMount')
    }

    //這個方法!!刷新UI之后調(diào)用!!!第一次加載UI不會來!!
    componentDidUpdate(){
        AlertIOS.alert('DidUpdate');
    }

    componentWillUnmount() {
        // 卸載界面
    }

    //當(dāng)組件傳入的 props 發(fā)生變化時(shí)調(diào)用级野，例如：父組件狀態(tài)改變，給子組件傳入了新的prop值阴幌。用于組件 props 變化后勺阐，更新state卷中。
    componentWillReceiveProps(nextProps) {

    }
}
const btnClick = ()=>{
    AlertIOS.alert('哥么我來了!!')
}

示例Demo
運(yùn)行：
連接模擬器 adb connect 127.0.0.1:7555（端口號）
連接模擬器 npx react-native run-android