• 使用方法
• 参考

• react-native组件NavigatorIOS与ListView结合使用
• react-native ListView组件点击跳转
• react-native ListView下拉刷新上拉加载实现
• react-native组件StackNavigator
• react-native TabNavigator用法

先看效果

使用方法

index.ios.js

import React, {Component} from 'react';
import {
  AppRegistry,
  NavigatorIOS
} from 'react-native';

import NewsList from './components/NewsList';
export default class ITNews extends Component {
  render() {
    return (
      <NavigatorIOS
        style={{flex: 1}}
        initialRoute={{
          component: NewsList,
          title: 'IT资讯'
        }}
      />
    );
  }
}

NewsList.js

import React, {Component} from 'react';
import {ListView, Text, StyleSheet, TouchableHighlight} from 'react-native';

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class NewsList extends Component {

  constructor(props) {
    super(props);
    this.state = ({
      dataSource: ds.cloneWithRows(['CNodeJS', '开源中国', '开发者头条', '推酷', 'SegmentFault', 'IT之家', 'V2EX', '知乎日报', 'W3CPlus']),
    });
  }

  _onPress(rowData) {
    console.log(rowData);
  }

  render() {
    return <ListView
      style={styles.listView}
      dataSource={this.state.dataSource}
      renderRow={(rowData) =>
        <TouchableHighlight
          style={styles.rowStyle}
          underlayColor='#008b8b'
          onPress={() => this._onPress(rowData)}>
          <Text style={styles.rowText}>{rowData}</Text>
        </TouchableHighlight>}
    />
  }
}

const styles = StyleSheet.create({
  listView: {
    backgroundColor: '#eee',
  },
  rowText: {
    padding: 10,
    fontSize: 18,
    backgroundColor: '#FFFFFF'
  },
  rowStyle: {
    flex: 1,
    marginBottom: 1,
    justifyContent: 'center',
  },
});

说明

• NavigationIOS必须要加上style={{flex: 1}}这个样式，否则它里面装载的组件不会显示

参考

• ListView
• NavigatorIOS

源码：https://github.com/atjiu/ITNews-React-Native