# 個人資訊-PersonalInfo

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

```javascript
<View style={styles.container}>
  <Image style={styles.cover} source={cover} />
  {// ...其餘要放置在該圖片上的元件}
</View>
```

## 設定TextInput 輸入完畢後按下鍵盤跳至下一個輸入項

取得下一個輸入項的ref，並在按下鍵盤的returnKey 時，在`onSubmitEditing`中呼叫下一個輸入項的ref來達到此效果

使用`blurOnSubmit`屬性避免鍵盤閃爍的情況發生

若使用 `Genymotion` 要把virtual keyboard 打開才有鍵盤可以用

```javascript
   render(){
     return (
       <View>
         <TextInput
            onChangeText={this.fillForm('address')}
            style={formInputStyle}
            value={form.address}
            returnKeyType="next"
            ref={(ref) => {
              this.addressRef = ref;
            }}
            onSubmitEditing={() => {
              this.telRef.focus();
            }}
            blurOnSubmit={false}
        />
        <TextInput
            onChangeText={this.fillForm('tel')}
            style={formInputStyle}
            value={form.tel}
            ref={(ref) => {
              this.telRef = ref;
            }}
          />
       </View>
     )
   }
```

## 取消android 上平台原生的輸入底線

使用`underlineColorAndroid`為`transparent`或是自定義的顏色

## 使用Inspector 查看元素邊界

打開Developer Menu，選擇Toggle Inspector 然後點選想要查看的元素

## 製作Avatar 輸入 與拍照Icon

使用`react-native-vector-icons` 中 [fontawesome](https://fontawesome.com/icons?d=gallery\&q=photo) 的 `camera` icon

```javascript
  import Icon from 'react-native-vector-icons/FontAwesome';

  ...

  <Icon name="camera" size={30} />
```

製作圓形的Image，將borderRadius 設為 寬高的一半，然後寬高必須等值

```javascript
const styles = StyleSheet.create({
  avatar: {
    width: 128,
    height: 128,
    borderRadius: 64,
  },
}) 

<Image style={styles.avatar} resizeMode="cover" source={emptyAvatar} />
```

將 camera icon 疊在avatar 的上方

## Avatar 設為absolute

* Avatar 設為position:absolute 使得之後的icon 元素可以疊在上面
* 將Avatar 與 Icon 包裹在一個cameraContainer父容器中，並固定一個寬高值
* 然後使用 `justityContent` 與 `alignSelf` 分別調整camera icon 的位置

```javascript
 const styles = Stylesheet.create({
    avatar: {
      width: 128,
      height: 128,
      borderRadius: 64,
      borderColor: 'white',
      borderWidth: 2,
      position: 'absolute'
    },
    cameraContainer: {
      width: 128,
      height: 128,
      justifyContent: 'flex-end'
    },
    cameraIcon: {
      alignSelf: 'flex-end'
    },
 })

 <View style={styles.cameraContainer}>
    <Image style={styles.avatar} resizeMode="cover" source={emptyAvatar} />
    <Icon style={styles.cameraIcon} name="camera" size={30} />
 </View>
```

## Icon 設為Absolute

```javascript
const styles = Stylesheet.create({
  avatar: {
    width: 128,
    height: 128,
    borderRadius: 64,
    borderColor: 'white',
    borderWidth: 2
  },
  cameraContainer: {},
  cameraIcon: {
    position: 'absolute',
    right: 0,
    bottom: 0
  },
})

<View style={styles.cameraContainer}>
  <Image style={styles.avatar} resizeMode="cover" source={emptyAvatar} />
  <Icon style={styles.cameraIcon} name="camera" size={30} />
</View>
```

## 使用RNCamera

<https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md>

* 製作Camera 頁面
* 自由layout Camera 頁面，譬如說開關閃光燈，切換前後鏡頭等
* 客製化拍照按鈕
* 記得帶入Key值，方便開啟方識別是哪一個照片格進行拍照
* 相機按鈕設計，疊在Preview 上 或是隔開

開啟相機並獲得拍照後的檔案路徑

```javascript
const onTakePicture = (key, uri) => {
    this.setState({
      avatarUri: uri
    });
};
this.props.navigation.navigate('Camera', { key: 'avatar', onTakePicture });
```

## 使用react-native 內建Button

* `title` button 顯示的文字
* `color` 改變按鈕的背景色(android)、文字色(ios)
* `onPress` 按下後的動作

```
 <Button title="前往商品清單" onPress={this.goMerchandiseList} />
```

## 避免表單因keyboard 彈起，導致擋住輸入的TextInput 元件

加入ScrollView，讓它協助scroll到對應輸入的元件，

```javascript
<ScrollView>
  <View style={styles.form}>
      {this.renderPersonAvatar(form.name)}
      <TextInput
        onChangeText={this.fillForm('address')}
        style={formInputStyle}
        value={form.address}
        placeholder="請設定地址"
        placeholderTextColor="white"
        returnKeyType="next"
        underlineColorAndroid="transparent"
        ref={(ref) => {
          this.addressRef = ref;
        }}
        onSubmitEditing={() => {
          this.telRef.focus();
        }}
        blurOnSubmit={false}
      />
      <TextInput
        onChangeText={this.fillForm('tel')}
        style={formInputStyle}
        value={form.tel}
        placeholder="請設定電話"
        placeholderTextColor="white"
        underlineColorAndroid="transparent"
        ref={(ref) => {
          this.telRef = ref;
        }}
      />
  </View>
  <Button
    disabled={this.state.uploading}
    title="前往商品清單"
    onPress={this.goMerchandiseList}
  />
</ScrollView>
```

但這會導致Button 無法置底，因為`contentContainerStyle`並未撐開，可是若使用flex: 1 撐開後，會導致在鍵盤彈開後，畫面無法scroll，這時候使用`flexGrow: 1`來達到，撐開內容，但鍵盤彈開後，畫面變小仍然可以進行scroll

```javascript
<ScrollView contentContainerStyle={ { flexGrow: 1 } }>
   <View style={styles.form}>
   </View>
</ScrollView>
```

前面提到將contentContent 設定為`{flex: 1}`會變得跟parent同高，所以導致外部高度與ˋ內部高度相同，而無法進行scroll ，那麼`flexGrow` 會讓contentView 的高度超過parent 的高度，所以可以維持ScrollView 繼續Scroll的特性


---

# 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_.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.