# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zhang699-2.gitbook.io/react-native/chapter1_/view-image-yuan-jian-jie-shao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.