> For the complete documentation index, see [llms.txt](https://zhang699-2.gitbook.io/react-native/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zhang699-2.gitbook.io/react-native/chapter1_/view-image-yuan-jian-jie-shao.md).

# 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](https://facebook.github.io/react-native/docs/view-style-props.htmlStyleSheet)

### StyleSheet

```javascript
import { StyleSheet } from 'react-native'

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

* 使用目的：因為使用ID參照，所以可以降低每次產生相同 style object 的 overhead
* 使用`flatten` 還原原本的style object&#x20;

```javascript
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>`
* 在畫面佔用空間的大小與容器中的佔用空間有關

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

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

```javascript
    <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 對&#x20;

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

  * 靜態資源直接使用source , `<Image source={require('./test.png)} />`
* style
  * 設定圖片本身的寬高 與 其他 Layout Props&#x20;
  * <https://facebook.github.io/react-native/docs/layout-props.html>
* blurRadius

  * 設定模糊程度&#x20;
  * 數字越大越模糊

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

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

![](/files/-LfNCohS8v-N8FxrVVTy)

常見技巧

* Avatar  (Rounded Image)

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

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

* 全螢幕背景

```javascript
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 上的長相
* `value`TextInput 當前再輸入框顯示的字串
* `blurOnSubmit`是否要讓元件在submit 後失去焦點
* `placeholder`
* `placeholderTextColor`
* 其他
* * TextInput focus -> virtual Keyboard Up&#x20;
* * TextInput blur -> virtual keyboard down