iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 4
0
Modern Web

我不用Expo啦，React Native！系列 第 4 篇

[Day4] 加入導覽列-Android：你再冷落我試試看啊？

12th鐵人賽 react-native ios android
10501 瀏覽

  • 分享至 

  • xImage
    •  

今日關鍵字：Navigation

首先先看到最外層的App.tsx這支檔案

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

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

declare const global: {HermesInternal: null | {}};

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.tsx</Text> to change
                this screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

App.tsx裡面撰寫整個App的畫面以及邏輯
之後需要將各自的功能從App.tsx拆解出來
App.tsx可以是Class的形式
也可以是函數的形式
官方最近比較推薦使用Functional Component
可以看到預設的App.tsx就是一個Arrow Function

最後的StyleSheet.create({...})為元件的樣式
React Native預設使用的是Flex佈局（不知道有沒有時間講）
由於App中沒有css
所以樣式必須以inline style的形式撰寫

React中將插入的各個元件
以<Component></Component>的形式包裹
並將各個元件組合（如同拼圖一般）
最後Function return拼圖的成品
不光是React Native，React也是一樣的寫法/images/emoticon/emoticon42.gif

由於基礎元件很多
等用到時再順便解釋功能

在寫Web時，我第一個寫的就是路徑，也就是Router的設定
在App中叫做Navigation
（其實還是不太ㄧ樣啦，不過做的事情就是導航到特定的頁面）
React Native中雖然也有內建
不過因為套件中通常有些比較好用的函式
所以還是找個套件來用吧

這次使用的是React Navigation
一定會有人想問套件那麼多，怎麼選？
https://ithelp.ithome.com.tw/upload/images/20200904/20121828lFoJh98ooc.png
選星星多的（毆）

不過說正經的
星星少不見得不好
但星星多得必有其長處
除非有設定等等不能使用的原因
不然還是推薦星星多的
在終端機輸入

yarn add @react-navigation/native

這裡需要使用的Navigation是Tab navigation
還要再安裝

yarn add @react-navigation/bottom-tabs

官方連結

來看一下官方範例的重點

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

這裡的重點有幾個

  1. Navigation外層要有個Container
  2. 每個Tab.Screen有不同的名字跟對應的頁面元件

讓我們把範例跟初始專案融合
（把初始的內容當成首頁）

// ...import...

function SettingsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

const HomeScreen = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.tsx</Text> to change
                this screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

// ...styles...

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

來跑跑看吧
https://ithelp.ithome.com.tw/upload/images/20200904/20121828dZey4e1sPF.png
/images/emoticon/emoticon04.gif

很明顯地看得出來還有東西沒安裝，這也是React Native為人詬病的原因之一：文件不完整
另外要記得只有ios每次安裝套件時，都需要跑進ios的資料夾執行安裝
所以還需要以下指令

yarn add react-native-safe-area-context react-native-screens 


ios:
cd ios && pod install && cd ..

這裡來跑跑看android
打開android Studio，點選右上角的AVD Manager
https://ithelp.ithome.com.tw/upload/images/20200904/201218289GRvskQpDz.png

點擊下方的Create Virtual Device後安裝指定型號的虛擬機
https://ithelp.ithome.com.tw/upload/images/20200904/201218282EwnMF3VjR.png
安裝完後按下播放按鈕

然後終端機執行

yarn android

https://ithelp.ithome.com.tw/upload/images/20200904/20121828RW1aqyyPoK.png
/images/emoticon/emoticon06.gif

這個其實是昨天偷懶的下場：Android沒有設定完成
點開官方網站
選擇React Native Cli Quickstart下的Target OS:Android

第三點：將以下內容加入$HOME/.bash_profile or $HOME/.bashrc
(如果是 zsh 則是 ~/.zprofile 或是 ~/.zshrc

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

詳細可以參考這支影片
Yes

然後在現在的終端機載入剛剛寫的東西
bash

source $HOME/.bash_profile

other

$HOME/.zprofile

接著再啟動一次

yarn ios
yarn android

https://ithelp.ithome.com.tw/upload/images/20200904/20121828leWOKdpKCV.png
成功啦/images/emoticon/emoticon07.gif
可以看到下方的導覽列顯示的字就是name這個property

今天原本以為安裝個套件很單純
結果意外遭遇亂流，還好安全下莊/images/emoticon/emoticon56.gif
明天來幫導覽列加入圖示

參考：React Navigation Tab Navigation
      React Native環境設定


上一篇
[Day3] 創建專案的時間到啦
下一篇
[Day5] 在導覽列加入圖示
系列文
我不用Expo啦，React Native！ 共 33 篇
  1. 29
    [Day29] Build成App
  2. 30
    [Day30] 初始畫面：JS版
  3. 31
    [Day31] 初始畫面：原生版
  4. 32
    [Day32] 提醒功能-6：最後的回馬槍
  5. 33
    [Day33] 加入Icon（順便偷渡完結感想）
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙