個人資訊-PersonalInfo

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

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

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

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

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

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

   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 的 camera icon

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

  ...

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

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

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 的位置

 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

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 上 或是隔開

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

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到對應輸入的元件，

<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

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

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