今天就開始投入到RN專案了，做後端出生，寫Android和iOS確實有點勉強，不過還是要把這段經歷記錄下來。

要實現的功能介面如下：

這個是最簡單的Form表單，第一步實現介面吧，不管點選效果，不管篩選控制元件... 

思路：

我把這幾類控制元件分為了3類：

1、帶頭像的一行抽取成一個元件

2、帶輸入框 TextInput的抽象成一個元件

3、帶選擇項的抽取成一個元件

首頁直接引用這3個元件

首頁程式碼：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

import TextInputWidget from './TextInputWidget.js';
import TextTipsWidget from './TextTipsWidget';
import TextImageWidget from './TextImageWidget.js';


class Demo extends Component {

  constructor(props){
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <TextImageWidget
          title='* 頭像' />

        <TextInputWidget
          title='* 暱稱'
          placeholder='請輸使用您的真實姓名' />

        <TextTipsWidget
          title='* 性別' tips='請選擇' onPress={this.showSex.bind(this)}/>

        <TextTipsWidget
            title='* 生日' tips='請選擇'/>

        <View style={{height:3}}/>

        <TextTipsWidget
            title='  學歷' tips='請選擇'/>

        <TextInputWidget
          title='  院校'
          placeholder='請填寫畢業／就讀院校' />

        <TextInputWidget
          title='  專業'
          placeholder='請填寫您的專業' />

        <TextTipsWidget
            title='* 身份' tips='請選擇您的身份'/>

        <TextTipsWidget
            title='* 教齡' tips='請選擇您的教齡'/>
      </View>
    );
  }

  //todo  彈出選擇 性別控制元件
  showSex(){

    alert('1');
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:20, //去除狀態列圖示
    backgroundColor: 'gray',
  },
});

AppRegistry.registerComponent('Demo', () => Demo);
 

import React, { Component } from 'react';
var {
  StyleSheet,
  View,
  Text,
  Image,
  TextInput,
  PixelRatio,
  Dimensions
} = require('react-native')


var screenWidth = Dimensions.get('window').width;


export default class TextImageWidget extends Component{

    constructor(props) {
      super(props);
    }

  _renderRow() {
    return (
      <View style={styles.rowContainer}  >
        <View style={styles.row}>
          <Text
            numberOfLines={1}
            style={styles.textInputTitle} >
            {this.props.title}
          </Text>
          <View style={styles.textImage}>
            <Image source={require('./img/defailHead.png')} style={styles.image} />
          </View>
          <View style={styles.rightArrow}>
            <Image source={require('./img/rightArrow.png')}  />
          </View>
        </View>
      </View>
    );

  }

  render() {
    return this._renderRow();
  }
}

const styles = StyleSheet.create({
    rowContainer: {
      backgroundColor: '#FFF',
      width:screenWidth,
    },
    row: {
      flexDirection: 'row',
      height: 44,
      alignItems: 'center',
      marginRight: 15,
      marginLeft: 15,
      //paddingTop:15,
      borderBottomWidth: 0.5 / PixelRatio.get(),
      borderColor:'gray',//需要標色

    },
    textInputTitle: {
      width: 80,
      fontSize: 13,
      //color: '#333',
      //backgroundColor: 'red',
    },
    textImage: {
      flex: 1,
      height: 44,// @todo should be changed if underlined
      justifyContent:'flex-end',
      flexDirection: 'row',

    },
    image:{
      width:38,
      height:38,
      backgroundColor:'gray',
      borderRadius: 19,
    },
    rightArrow:{
      paddingLeft:10,
      //backgroundColor:'red',

    }

  });
 

由於另外兩個元件和TextImageWidget類似，所以就不貼原始碼了。

這個Demo介面寫的很粗糙，只是實現了功能，還有需要優化的地方：

1、＊ 號的處理

2、元件封裝的不徹底，通用性不夠

大家有什麼好建議，可以留言。