通過使用TabBarIOS組件拓展其功能構(gòu)建了一個ReactNative項目。包含內(nèi)容：熟練ReactNative的flex box布局，熟悉基本組件、自定義組件以及常用API 。

先看效果圖：

screen2

screen1

在index.ios.js中的主要代碼：

render: function(){
    return(
      <TabBarIOS style={styles.flex}>
        <TabBarIOS.Item
          title="首頁"
          onPress={this.select.bind(this, 'home')}
          selected={this.state.tab === 'home'}>
          <NavigatorIOS
            style={{flex:1}}
            initialRoute={{
              component: Home,
              title: '首頁',
              passProps: {},
            }}
          />
        </TabBarIOS.Item>

        <TabBarIOS.Item
          title="發(fā)現(xiàn)"
          onPress={this.select.bind(this, 'find')}
          selected={this.state.tab === 'find'}>
          <ScrollView style={styles.flex}>
          </ScrollView>     
        </TabBarIOS.Item>

        <TabBarIOS.Item
          title="我"
          onPress={this.select.bind(this, 'profile')}
          selected={this.state.tab === 'profile'}>
          <ScrollView style={styles.flex}>
          </ScrollView>
        </TabBarIOS.Item>
      </TabBarIOS>
    );
  }
});

這就是一個app的主要結(jié)構(gòu)，在iOS中TabBarIOS充當(dāng)著UITabBarController的角色。這里使用了自定義組件Home，需要導(dǎo)入var Home = require('./Home');

• 自定義的首頁組件Home，在Home.js文件的主要代碼：
  

var Home = React.createClass({
  render: function(){
    return (
      <ScrollView style={styles.flex}>
        <Text style={styles.list_item} onPress={this.goTo}>☆ 點我喲1</Text>
        <Text style={styles.list_item} onPress={this.goTo}>☆ 點我喲2</Text>
        <Text style={styles.list_item} onPress={this.goTo}>☆ 點我喲3</Text>
      </ScrollView>
      );
  },
  goTo: function(){
    this.props.navigator.push({
      component: Detail,
      title: '詳情',
      rightButtonTitle: '右Button',
      onRightButtonPress: function(){
        alert('點擊了右Button');
      }
    });
  }
});
 module.exports = Home;

在iOS中相當(dāng)于ViewController，也相當(dāng)于在Android中的Activity。在文件結(jié)尾特別注意這句代碼module.exports = Home;這是導(dǎo)出該類，才能讓別的類可引用。這里用引用了Detail組件，在文件開頭需導(dǎo)入該類var Detail = require('./Detail');

• 自定義的組件Detail主要代碼：
  

......
//首頁詳情
var Detail = React.createClass({
  render:function(){
    return (
      <ScrollView>
      <MargginBox>
        <BorderBox>
          <PaddingBox>
            <ElementBox>
            </ElementBox>
          </PaddingBox>
        </BorderBox>
      </MargginBox>
      </ScrollView>
    )
  }
});

var MargginBox = React.createClass({
  render:function(){
    return (
      <View style={[BoxStyles.margginBox]}>
        <Box  childName="borderBox"  height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}</Box>
      </View>
    )
  }
});

var BorderBox = React.createClass({
  render:function(){
    return (
      <Box childName="paddingBox"  height="height300" width="width300" boxName="border" classBg="bggreen" >{this.props.children}</Box>
    )
  }
});

var PaddingBox = React.createClass({
  render:function(){
    return (
      <Box childName="elementBox"  height="height200" width="width200" boxName="padding" classBg="bgyellow" >{this.props.children}</Box>
    )
  }
});

var Box = React.createClass({
  render:function(){
    return (
      <View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
        <View  style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top</Text></View>
        <View style={[BoxStyles[this.props.childName]]}>
          <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left</Text></View>
            {this.props.children}
          <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right</Text></View>
        </View>
        <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom</Text></View>
        <View style={[BoxStyles.label]}><Text>{this.props.boxName}</Text></View>
      </View>
    )
  }
});

var ElementBox = React.createClass({
  render:function(){
    return (
      <View style={[BoxStyles.box,BoxStyles.height100]}>
        <View style={[BoxStyles.measureBox]}>
          <View style={[BoxStyles.right]}><Text>height</Text></View>
        </View>
        <View style={[BoxStyles.bottom,BoxStyles.height50]} ><Text>width</Text></View>
        <View style={[BoxStyles.label]}><Text>element</Text></View>
        <View style={[BoxStyles.widthdashed]}></View>
        <View style={[BoxStyles.heightdashed]}></View>
      </View>
    )
  }
});

var BoxStyles = StyleSheet.create({
......
})

 module.exports = Detail;    

特別注意：

1.在github下載了demo后直接運行會報錯

須cd到項目根目錄，然后在終端運行npm install，這會需要耐心等待一點時間。有如下的效果則成功，在配置中。

screen3.png

2.運行到真機上的配置

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

只需將AppDelegate.m文件上面代碼中的localhost替換為電腦ip地址即可，如：192.168.1.10。

獲取電腦ip地址的簡單辦法，如下圖。

screen4.png

源碼請點擊github地址下載。

QQ:2239344645 我的github