React Native Android Navigator的使用2

/** * React Native News App * https://github.com/tabalt/ReactNativeNews */ 'use strict'; var React = require('react-native'); var NavToolbar = require('./NavToolBar.android'); var { Image, ListView, StyleSheet, Text, View, TouchableOpacity, Navigator, NativeModules, TouchableHighlight, NavToolbar, ToolbarAndroid, } = React; var state={ isLoading: true, message:"加载数据中...", }; var NEWS_LIST_API_URL = 'http://88.studyteam.sinaapp.com/rnn/news_list.json'; var AlterDialog = NativeModules.AlterDialog; var NewsList = React.createClass({ gotoPersonPage(){ this.props.navigator.push( { id: 'NewsLists', name : '12312', }); // console.log("1111111111111111111"+this.props.navigator.id); }, render : function() { var names =this.props.name; console.log('names : '+ names); var content = ( <View style={styles.container}> <Text style={styles.welcome} onPress={this.gotoPersonPage} > 下一页 </Text> </View> ); //console.log("new List name :"+ this.props.navigator.route.id); return( // <View style={{ flex: 1,}}> // <View style={{ backgroundColor: '#246dd5',justifyContent:'center',alignItems:'center', // height: 56,}}> // <Text style={{ fontSize : 16,color : 'white',}}> 123</Text> // </View > // { // content // } // </View> <Navigator renderScene={this.renderScene.bind(this)} navigationBar={ <Navigator.NavigationBar style={{backgroundColor: '#246dd5', alignItems: 'center'}} routeMapper={NavigationBarRouteMapper} /> } /> // return ( // <View> // <ToolbarAndroid // //actions={toolbarActions} // // navIcon={require('./ic_menu_white.png')} // // 点击功能调用的函数 // onActionSelected={this._onActionSelected} // // 点击图标的调用的函数 // onIconClicked={() => this.setState({actionText: 'Icon clicked'})} // style={styles.toolbar} // // subtitle={'123'} // // 最右边的菜单 // //actions={[{title: 'Settings', icon: require('./ic_menu_white.png'), show: 'always'}]} // title={"第一页" }/> // { // content // } // </View> ); }, renderScene(route, navigator) { console.log('names2 : '+ this.props.name); return ( <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <TouchableHighlight onPress={this.gotoPersonPage.bind(this)}> <Text style={{color: 'red'}}>下一页</Text> </TouchableHighlight> </View> ); }, }); var NavigationBarRouteMapper = { LeftButton(route, navigator, index, navState) { return null; }, RightButton(route, navigator, index, navState) { return null; }, Title(route, navigator, index, navState) { return ( <View style={{ flex: 1,justifyContent:'center',alignItems:'center',}}> <Text style={{color: 'white', backgroundColor: '#ffffff',}}> 登录 </Text> </View> ); } }; var toolbarActions = [ {title: 'Create', icon: require('./ic_menu_white.png'), show: 'always'}, {title: 'Filter'}, {title: 'Settings', icon: require('./ic_menu_white.png'), show: 'always'}, ]; var styles = StyleSheet.create({ toolbar: { backgroundColor: '#4E8EF7', height: 56, }, pageContainer: { marginLeft : 10, marginRight : 10, }, container: { flex: 1, flexDirection : 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff', }, rightContainer: { flex: 1, }, newsItemContainer: { borderBottomWidth: 1, borderBottomColor: '#ebebeb', }, listView: { backgroundColor: '#ffffff', }, newsPic : { width : 90, height : 60, margin: 10, marginLeft: 0, }, newsTitle : { color : '#4f4f4f', fontSize : 16, textAlign : 'left', }, newsSummary : { color : '#bababa', fontSize : 14, textAlign : 'left', }, }); module.exports = NewsList;