Expo DAY7 --- View, Text & Assets

2018鐵人賽 react-native day7 expo exponentjs

iamcxa

2017-12-11 00:07:23

3556 瀏覽

Expo DAY7 --- View, Text & Assets

tags: `day7` `iThome鐵人賽2018` `ReactNative` `Expo` `View` `Text` `Assets`

前言

目標

[ ] 學會使用 View 與 Text
[ ] 學會操作 Local Image
[ ] 學會使用 remote Image

開新專案

首先打開你的 Expo XDE，找到閃電按鈕，點選 New Project。

隨之會出現視窗，詢問你要是否要使用專案模板建立新專案，以及該專案要存在哪裡。上次的[]中，我們選過右邊的 tab 模板，這次我們要使用左邊的空白專案。

選取左邊的 Blank，並且取名為 expo-tour-day6。

幾分鐘後會看到如下畫面，表示一切順利。如果有問題，歡迎回文留言或到 React Native Taiwan 發問。

最後，選取 Open in Editor 會自動使用 VSCode 打開專案。

View

View 是 React Native 最基本的 UI 元件。View 是一個支援 flexbox、style，以及 touch 事件的容器，同時也支援 React Native 的 Accessibility 處理。

最基本的 View 長得就像以下這個樣子，它就是一個 html 元素，連屬性的寫法也一樣。

<View>
{/* 一個 View */}
</View>

引用一下官方文件的範例，實際使用大概像是以下這樣，同時可以參考 View 使用範例。

class App extends Component {
  render() {
    return (
      // 有子元素的 View
      <View
        style={{
          flexDirection: 'row',
          height: 100,
          padding: 20,
        }}>
        {/* 就是一塊藍色的 View */}
        <View style={{backgroundColor: 'blue', flex: 0.3}} />
            
        {/* 就是一塊藍色的 View */}
        <View style={{backgroundColor: 'red', flex: 0.5}} />

        {/* 啊，混進一個 Text */}
        <Text>Hello World!</Text>
      </View>
    );
  }
}

想了解更多屬性嗎？View 的全部 Props。

Text

Asset

檔案會存在哪裡？

效能考量

It’s not currently possible to bundle assets inside of standalone apps. For many apps, this is a dealbreaker. For example, if your app includes 100mb of images and you need them to be available immediately when the user opens the app, you will need to detach/eject. When you publish your app, all assets that you import with require in your app are uploaded to CloudFront and loaded on demand, when requested in your app — similar to how a webpage works. This has the benefit of allowing you to update any asset over the air, without re-submitting to app stores, but it isn’t ideal for every situation. Some assets need to be available immediately when the app loads, and sometimes there are a lot of these assets. In these situations, the only option available to you right now is downloading and caching assets when your app loads. We are working on making it possible to bundle assets with your standalone app while also preserving the ability to update them OTA.