> 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_.md).

# 個人資訊-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的特性