iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 9
0
Modern Web

使用 Modern Web 技術來打造 Native App系列 第 9

Day 09:常見的 React Native Component - Part II

本篇目的

使用者主要是透過 Touch 來跟 Mobile App 互動,跟網頁中的 Click 不太一樣。而它又可以結合各種的手勢,長按一個按鈕、滾動 List、放大縮小地圖、Swipe 等等,這邊會簡單介紹到一些相關的 Component。

Touchables*

React Native 內建許多能處理 Touch 的 Component (統稱 Touchables*),它們都能指定 onPressonPressInonPressOutonLongPress 等等的 Event Handler,而它們之間的差別在於它們被 Touch 之後會有不同的回饋 (Feedback):

  • TouchableHighlight
  • TouchableOpacity
  • TouchableNativeFeedback
  • TouchableWithoutFeedback

TouchableNativeFeedback 只有 Android 能用,而官方也不建議使用 TouchableWithoutFeedback (完全沒有回饋),所以這兩個就先不介紹了。

TouchableHighlight

TouchableHighlight 在被 Touch 之後會有一個 Highlight 的效果,而 Highlight 的顏色可以透過 underlayColor 改變。

<TouchableHighlight
  onPress={() => {}}
  underlayColor="red"
>
  <View style={styles.btn}>
    <Text style={styles.text}>按鈕</Text>
  </View>
</TouchableHighlight>

更詳細的內容請參閱 TouchableHighlight官方文件

TouchableOpacity

TouchableOpacity 在被 Touch 之後會有一個透明度改變的效果。

<TouchableOpacity
  onPress={() => {}}
>
  <View style={styles.btn}>
    <Text style={styles.text}>按鈕</Text>
  </View>
</TouchableOpacity>

更詳細的內容請參閱 TouchableOpacity官方文件

Button

Button 是在v0.37.0 才導入的新 Component,React Naitve 部落格的這篇文章:Introducing Button, Faster Installs with Yarn, and a Public Roadmap 有介紹了它的由來,以往要做出一個跨平台可用的按鈕不夠簡單,而這是 React Native 未來的方向之一,所以才有了它。

<Button
  onPress={() => {}}
  title="按我啊"
  accessibilityLabel="按我啊"
  color="red"
  disabled={false}
/>

為了簡單明瞭、立即可用,Button 的 API 做出了一些取捨:

  • 只保留了 onPress,沒有 onPressInonLongPress 等等的其他 Handler
  • 只保留了 color (在 iOS 是文字顏色、在 Android 是背景顏色) 的客製化,無法設定其他 style

更詳細的內容請參閱 Button官方文件

ScrollView

內容超出一個畫面所能顯示的量時,我們通常需要使用 ScrollView,讓它能藉由往下滑來瀏覽:

<ScrollView>
  <Text style={{ fontSize: 60 }}>帶給各位滿滿的大平台!</Text>
  <Text style={{ fontSize: 60, color: 'red' }}>帶給各位滿滿的大平台!</Text>
  <Text style={{ fontSize: 60, color: 'blue' }}>帶給各位滿滿的大平台!</Text>
  <Text style={{ fontSize: 60 }}>帶給各位滿滿的大平台!</Text>
  <Text style={{ fontSize: 60, color: 'red' }}>帶給各位滿滿的大平台!</Text>
  <Text style={{ fontSize: 60, color: 'blue' }}>帶給各位滿滿的大平台!</Text>
</ScrollView>

在滑動時,右側會出現滾動軸。(GIF 簡化不少影格,所以會比較不順)

更詳細的內容請參閱 ScrollView官方文件

ListView

ListView 通常被用在呈現大量陣列資料時使用,不會一次 Render 所有的 Item,只會 Render 呈現在畫面上的 Item,可以改善單純使用 ScrollView 的效能問題。需要傳遞一個 Function 給 renderRow,讓 ListView 知道怎麼去 Render 每一列。

ListViewdataSource Prop 接一個 ListView.DataSource,而產生它的時候要給一個回傳 Boolean 值的 rowHasChanged Function,讓它可以判斷兩個 Row 是不是一樣的:

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
    });
    this.state = {
      dataSource: ds.cloneWithRows([
        '帶給各位!',
        '滿滿的!',
        '大平台!',
        '帶給各位!',
        '滿滿的!',
        '大平台!',
        '帶給各位!',
        '滿滿的!',
        '大平台!',
        '帶給各位!',
        '滿滿的!',
        '大平台!',
      ])
    };
  }
  render() {
    return (
      <View style={{ flex: 1, paddingTop: 22 }}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={{ fontSize: 60 }}>{rowData}</Text>}
        />
      </View>
    );
  }
}

更詳細的內容請參閱 ListView官方文件

結語

這些互動相關的 Component 通常是使用者體驗是否良好的關鍵,在使用時也必須特別小心。


上一篇
Day 08:常見的 React Native Component - Part I
下一篇
Day 10:跨平台策略
系列文
使用 Modern Web 技術來打造 Native App30

尚未有邦友留言

立即登入留言