chenbin92 / react-native-example Goto Github PK

每个应用程序都希望能有一个吸引眼球，令人难忘的图标，它会出现在用户手机的主屏幕和 App Store上，
所以，设置一个好的 App Icon 会给用户第一眼视觉的享受，是至关重要的。下面的步骤让我们一起来
为你的 App 换上Icon:

  $ node -v  =>  v5.1.1
  $ react-native cli -v  =>  react-native-cli: 0.1.10
                         =>  react-native: 0.20.0

  $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.0/install.sh | bash
  $ source ~/.nvm/nvm.sh
  $ nvm install 5.1.1
  $ nvm use 5.1.1

  $ nvm use <version> // 切换版本
  $ nvm ls-remote // 查看远程 Node.js 的版本
  $ nvm ls  // 查看本地安装的 Node.js 的版本

 $ brew install watchman
 $ brew install flow

 $ npm install -g react-native-cli  // -g 表示全局安装

 $ npm config set registry https://registry.npm.taobao.org
 $ npm config set disturl https://npm.taobao.org/dist

// 在 /usr/local/lib/node_modules/react-cli/index.js中找到下面一行代码
run('npm install --save react-bative', function(e) {

修改为

run('cnpm install --save react-bative', function(e) {

 $ cnpm install -g react-native-cli  // -g 表示全局安装

  $ brew -v  =>  Homebrew 0.9.5
  $ npm -v   =>  3.3.12
  $ cnpm -b  =>  3.3.12
  $ node -v  =>  v5.1.1
  $ nvm --version  => 0.17.3
  $ react-native cli -v  =>  react-native-cli: 0.1.10
                         =>  react-native: 0.20.0

  $ git clone [email protected]:chenbin92/React-native-example.git
  $ cd React-native-example

  $ npm install

  $ npm start
  $ react-native run-ios

  $ npm update -g react-native-cli  // 更新本地 react-native-cli的版本
  $ npm install --save [email protected] // @后面跟需要升级的版本号
  $ react-native upgrade

  $ npm install --save [email protected] // @后面跟需要升级的版本号
  $ react-native upgrade

flex： number

flexDirection：row | column

flexWrap：wrap | nowrap

alignItems：flex-start | flex-end | center | stretch

justifyContent：flex-start | flex-end | center | space-between | space-around

alignSelf：auto | flex-start | flex-end | center | stretch

<View>
   <Text style={{backgroundColor: 'red',height: 100}}> Text 组件默认占据100%的宽度</Text>
   <Text style={{backgroundColor: '#469EDD',height: 100}}> Text 组件默认是纵向布局</Text>
</View>

<View style={{marginTop: 22,flex: 1,flexDirection: 'row', justifyContent: 'flex-start'}}>
    <Text style={{backgroundColor: 'red',height: 100}}>1. 父元素必须设置flex属性，才能使用flexbox布局</Text>
    <Text style={{backgroundColor: '#469EDD',height: 100}}> 2. flexDirection默认为纵向布局，即主轴默认是竖直方向</Text>
</View>

1. 可以指定首次初始化渲染的条数
2. 可以指定每次事件循环渲染的条数
3. 支持下拉刷新(不支持上拉刷新)

1. initialListSize: 初始化渲染的条数，一般大于首屏条数
2. pageSize:每次渲染的条数
3. renderScrollComponent: 返回的组件用来渲染list rows
4. scrollRenderAheadDistance: 顶部屏幕之外的数据离屏幕头部多远时开始渲染数据
5. onEndReachedThreshold: 距离底部多少时出发`onEndReached`
6. dataSource：接受的数据源，`ListViewDataSource`的实例对象,***必须***
7. renderSeparator：每行之间的分割线，函数类型
8. renderRow：每行的渲染函数
9. renderFooter：尾部渲染函数
10. renderHeader：头部渲染函数
11. renderSectionHeader：分组头的渲染函数
12. onChangeVisibleRows：可视化区域变化时出发，屏幕旋转时会调用
13. removeClippedSubviews： 实验性质的属性，提高滚动时到性能，和row的样式‘overflow:hidden’一起使用

1. getMetrics：返回一些常态数据
2. getScrollResponder：返回事件相应器对象
3.  setNativeProps：动态设置样式

var dataSource = new ListView.DataSource({
  // doSomething
})

var dataSource = new ListView.DataSource({
   rowHasChanged: (row1, row2) => row1 !== row2
})

render: function() {
   return (
      <ListView dataSource={this.state.dataSource} />
   )
}

render: function() {
   return (
      <ListView 
         dataSource={this.state.dataSource}
         renderRow={(rowData)=> <Text>{rowData}</Text>}
     />
   )
}

var ListViewExample = React.createClass({
  // 这里返回一个对象，设置组件的初始化状态，
  getInitialState: function() {
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2  // 用于判断当前数据变化的标准
    });
    return {
      dataSource: ds.cloneWithRows(this._genRows()),
    };
  },

   // 生成数据
  _genRows: function() {
      var dataArray = [];
      for(var i=1;i<15;i++) {
        dataArray.push("row" + i)
      }
      return dataArray;
  },

  render: function() {
    return (
      <ListView
        dataSource={this.state.dataSource} // 数据源
        renderRow={(rowData) => <Text style={styles.rowText}>{rowData}</Text>} /> // 接受数组中的每个数据作为参数, 作为listview的每一行（for循环）
    );
  }
});

var styles = StyleSheet.create({
  rowText: {
    padding: 18,
    borderWidth: 1,
    borderColor: '#eee'
  },
});

  $ npm install react-native-vector-icons --save
  $ rnpm link

  var React = require('react-native');
  var {
    View, 
    Text, 
    TabBarIOS,
  } = React;
  var Icon = require('react-native-vector-icons/Ionicons');

  var TabBarView = React.createClass({
    render: function() {
      return (
        <TabBarIOS>
          <Icon.TabBarItem
            title="Home"
            iconName="ios-home-outline"
            selectedIconName="ios-home"
          >
            <View style={styles.tabContent}><Text>Home Tab</Text></View>
          </Icon.TabBarItem>
        </TabBarIOS>
      );
    }
  };

    var TabBarView = React.createClass({
    render: function() {
      return (
        <TabBarIOS>
          <Icon.TabBarItem
            title="Home"
            iconName="ios-home-outline"
            selectedIconName="ios-home"
          >
         // 注意这里的改变与步骤二对比
         <NavigatorIOS
            barTintColor='#5F97F6'
            titleTextColor='#fff'
            style={styles.navigator}
            initialRoute={{
              component: ComponentName, // 当前 TabBarItem 需要加载的组件
              passProps: {},
              title: 'PageTitle',
            }}/>

          </Icon.TabBarItem>
        </TabBarIOS>
      );
    }
  };

    {
       component: function //表示该页面需要加载的视图组件
       title: String  // 表示需要在头部显示的标题
       passProps: object // 用于页面间传递数据
       backButtonIcon: // 后退按钮图标
       backButtonTitle: // 后退按钮标题
       leftButtonIcon: // 左边按钮图标
       leftButtonTitle: // 左边按钮标题
       onLeftButtonPress: // 左边按钮点击事件
       rightButtonIcon: // 右边按钮图标
       rightButtonTitle: // 右边按钮标题
       onRightButtonPress: // 右边按钮点击事件
       wrapperStyle: // 包裹样式
    }

_navigateToSubview: function() {
    this.props.navigator.push({    // 调用navigator对象的push()方法 
      component: MessageDetail, 
      title: "Detail", 
      rightButtonTitle: 'New',
      onRightButtonPress: function(){
        alert('On right button press!');
      }
    })
  }

 * push(route): 加载一个新的页面（视图或者路由）并且路由到该页面
 * pop(): 返回到上一个页面
 * popN(n): 一次性返回N个页面，当 N = 1时， 即相当于pop()方法的效果
 * replace(route): 替换当前的路由
 * replacePrevious(route): 替换前一个页面的视图并且回退过去
 * resetTo(route): 取代最顶层的路由并且回退过去 
 * popToTop():  回到最上层视图

   $  i react-native-swiper --save

var Swiper = require('react-native-swiper')

var swiper = React.createClass({
  render: function() {
    return (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>第一张</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>第二张</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>第三张</Text>
        </View>
      </Swiper>
    )
  }
})

var Login = React.createClass({
  render: function() {
    return (
      <View style={styles.loginContainer}>
        <Image
          style={styles.logoImage}
          source={{uri: 'http://7xr387.com1.z0.glb.clouddn.com/logo2.png'}} />
        <TextInput
          style={styles.accountInput}
          placeholder='Phone Number' />
          <View style={{height:1,backgroundColor:'#f4f4f4'}} />
        <TextInput
          style={styles.passowrdInput}
          placeholder='Passowrd'
          password={true} />
        <View style={styles.loginButton}>
          <Text style={{color: '#fff'}} >Login</Text>
        </View>
        <View style={{flex:1,flexDirection:'row',alignItems: 'flex-end',bottom:10}}>
          <Text style={styles.viewUnlogin}>
               无法登录?
          </Text>
          <Text style={styles.viewRegister}>
               新用户
          </Text>
        </View>
      </View>
    )
  }
})

// from landingSwiper to login
<Navigator
        initialRoute = {{name:"landingSwiper", component: LandingSwiper}}
        renderScene={(route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator={navigator} />
        }} />

// from login to TabBar
 _login: function() {
    this.props.navigator.resetTo({
      component: TabBar,
      title: 'Home',
    })
  },

Invariant Violation: No navigator item should be pushed without JS knowing about it 1 0"