day7
iThome鐵人賽2018
ReactNative
Expo
View
Text
Assets
首先打開你的 Expo XDE
,找到閃電按鈕,點選 New Project
。
隨之會出現視窗,詢問你要是否要使用專案模板建立新專案,以及該專案要存在哪裡。上次的[]中,我們選過右邊的 tab 模板,這次我們要使用左邊的空白專案。
選取左邊的 Blank
,並且取名為 expo-tour-day6
。
幾分鐘後會看到如下畫面,表示一切順利。如果有問題,歡迎回文留言或到 React Native Taiwan 發問。
最後,選取 Open in Editor
會自動使用 VSCode 打開專案。
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。
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.