View, Image, TextInput 元件介紹

常用View.layout 屬性

marginHorizontal

marginHorizontal

padding

backgroundColor

opacity

....

可參考：https://facebook.github.io/react-native/docs/layout-props.html

https://facebook.github.io/react-native/docs/view-style-props.html

StyleSheet

import { StyleSheet } from 'react-native'

const styles = StylesSheet.create({
   container: {
     flex: 1
   }
})

• 使用目的：因為使用ID參照，所以可以降低每次產生相同 style object 的 overhead

• 使用flatten 還原原本的style object

const styles = StyleSheet.create({
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5
  }
});

...

render() {
    const yourWindow = Dimensions.get('window');
    const instructionStyle = StyleSheet.flatten(styles.instructions);
    instructionStyle.color = '#ddd';
    return (
      <View style={styles.container}>
         ...
        <Text style={instructionStyle}>Test your Camera</Text>

      </View>
    );
  }

View 元件

• 預設本身無任何畫面與佔用任何空間(除非明確指定寬高或設定{flex: 1})，作為其餘畫面元件的容器，效果如同web 上的 <div>

• 在畫面佔用空間的大小與容器中的佔用空間有關

  <View>
      <Text style={ { width: 20, height: 20 } }></Text>
  </View>

• 可以使用{flex: 1}將其撐得與parent 同高與同寬，下面例子裡面的view 的 高為100 但寬還是 0 (沒指定預設flexDirection: 'column')

    <View style={ {width: 100, height: 100} }>
        <View style={ { flex: 1 } } />
    </View>

常見技巧：

• Button 置底

  <View style={ { flex: 1 } }>
      <View style={ { flex: 1 } }>
          <Text>{'中間版面'}</Text>
      </View>
      <Button  title='Test' onPress={()=>()} />
  </View>

Image 元件

• tintColor

  • 將圖片中非透明元素設定為指定顏色，常用於Icon 換色

• resizeMode

  • stretch | cover | contain

  • 後兩者在不改變圖片本身比例的情況下，對圖片跟他的設定的大小width, height 做適當的處理

  • cover :無論圖片大小，讓圖片撐滿所設定的寬高，並且保留比例(所以圖片比例跟設定的寬高比例不同會被裁切)

  • contain: 無論圖片大小，讓圖片置於所設定的寬高中，並且保留比例(所以圖片若比例不同不會被裁切)

• source

  • 網路資源使用uri 對

  <Image source={ { uri: http://|file:// } } />

  • 靜態資源直接使用source , <Image source={require('./test.png)} />

• style

  • 設定圖片本身的寬高 與 其他 Layout Props

  • https://facebook.github.io/react-native/docs/layout-props.html

• blurRadius

  • 設定模糊程度

  • 數字越大越模糊

  [blurRadius] (https://facebook.github.io/react-native/docs/image.html#blurradius\

    <Image style={styles.cover} blurRadius={5} resizeMode="cover" source={cover} />

常見技巧

• Avatar (Rounded Image)

const styles = StyleSheet.create({
    image: {
        borderRadius: 20,
        width: 40,
        height: 40
    }
})

...
<Image style={styles.image} source={require('./some-image.png')} resizeMode='cover' />

• 全螢幕背景

const styles = StyleSheet.create({
    image: {
       position: 'absolute',
       top: 0,
       left: 0,
       bottom: 0,
       right: 0
    },
    container: {
        flex: 1
    }
})

...
<View style={styles.container}>
    <Image style={styles.image} resizeMode='cover' source={require('./some-image.png')} />
</View>

TextInput 元件

• onChangeText接收使用者每次輸入的字元

• onSubmitEditing當virtual keyboard 的 returnKey 觸發時

• returnKeyType 設定returnKey 在virtual keyboard 上的長相

• valueTextInput 當前再輸入框顯示的字串

• blurOnSubmit是否要讓元件在submit 後失去焦點

• placeholder

• placeholderTextColor

• 其他

• • TextInput focus -> virtual Keyboard Up

• • TextInput blur -> virtual keyboard down