Index.android.js
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} from 'react-native';
var HomePage = require('./HomePage');
var DetailPage = require('./DetailPage');
// var MainPage = require('./MainPage');
// var PersonPage = require('./PersonPage');
// var NoNavigatorPage = require('./NoNavigatorPage');
class App extends Component {
render() {
return (
<Navigator
initialRoute={{id: 'HomePage', name: 'Index'}}
renderScene={this.renderScene.bind(this)}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.FloatFromRight;
}} />
);
}
renderScene(route, navigator) {
var routeId = route.id;
if (routeId === 'HomePage') {
return (
<HomePage
navigator={navigator} />
);
}
if (routeId === 'DetailPage') {
return (
<DetailPage
navigator={navigator}
title="Blog Content"
/>
);
}
// if (routeId === 'MainPage') {
// return (
// <MainPage
// navigator={navigator} />
// );
// }
// if (routeId === 'PersonPage') {
// return (
// <PersonPage
// navigator={navigator} />
// );
// }
// if (routeId === 'NoNavigatorPage') {
// return (
// <NoNavigatorPage
// navigator={navigator} />
// );
// }
return this.noRoute(navigator);
}
noRoute(navigator) {
return (
<View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
<TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
onPress={() => navigator.pop()}>
<Text style={{color: 'red', fontWeight: 'bold'}}>No Page Found</Text>
</TouchableOpacity>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
}
});
这是我的首页
新主页
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Image,
Text,
ListView,
TouchableHighlight,
TouchableOpacity,
Navigator,
View,
} from 'react-native';
**import news_items from './mock_data.json';**
//var news_items = require("./mock_data.json");
class HomePage extends Component
{
// Initialize the hardcoded data
constructor(props)
{
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(news_items),
username:"Test User"
};
}
render()
{
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigationBar={
<Navigator.NavigationBar style={styles.navbarstyle}
routeMapper={NavigationBarRouteMapper} />
}
/>
);
}
renderScene(route, navigator) {
return (
<View style={{paddingTop: 22,flex:1}}>
<ListView
showLoadMore={true}
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>}
/>
</View>
);
}
componentDidMount(){
this.setState({ dataSource: this.state.dataSource.cloneWithRows(news_items) });
}
renderRow(rowData, sectionID, rowID, highlightRow: (sectionID: number, rowID: number) => void){
// var rowHash = Math.abs(hashCode(rowData));
return (
<TouchableHighlight
underlayColor = '#F0F0F0'
onPress={() => {
this._pressRow(rowID,rowData);
highlightRow(sectionID, rowID);
}}
>
<View style ={styles.row}>
<Text style={styles.textStyle}>{rowData.title}</Text>
<View style={{flexDirection: 'row'}}>
<Text numberOfLines={3} style={styles.content_summary}>
{rowData.description}
</Text>
</View>
</View>
</TouchableHighlight>
)
}
_pressRow(rowID,rowData) {
this.props.navigator.push({
id: 'DetailPage',
name: 'DetailPage',
});
}
}
var hashCode = function(str) {
var hash = 15;
for (var ii = str.length - 1; ii >= 0; ii--) {
hash = ((hash << 5) - hash) + str.charCodeAt(ii);
}
return hash;
};
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FF0000',
},
content_summary:
{
flex: 1,
fontWeight: '300',
fontSize: 10,
marginTop: 10,
textAlign:'justify',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
thumb: {
width: 32,
height: 32,
},
row:{
flex:1,
flexDirection:'column',//'row'
padding:10,
borderBottomWidth: 1,
borderColor: '#d7d7d7',
},
selectionText:{
fontSize:15,
paddingTop:3,
color:'#000000',
textAlign:'right'
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#000000',
},
textStyle: {
fontSize:12,
textAlign:'left',
color: '#000000',
},
navbarstyle: {
backgroundColor: '#000000',
alignItems: 'center',
height:50,
}
});
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
return null;
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
<Text style={{color: 'white', margin: 10, fontSize: 16}}>
React List Demo
</Text>
</TouchableOpacity>
);
}
};
详细
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Image,
Text,
ListView,
TouchableHighlight,
TouchableOpacity,
ScrollView,
Navigator,
View
} from 'react-native';
import news_items from './mock_data.json';
class DetailPage extends Component
{
constructor(props)
{
super(props);
console.log(this.props.row_data);
}
render() {
return (
<Navigator
renderScene={this.renderScene.bind(this)}
navigator={this.props.navigator}
navigationBar={
<Navigator.NavigationBar style={styles.navbarstyle}
routeMapper={NavigationBarRouteMapper} />
} />
);
}
renderScene(route, navigator) {
return (
<ScrollView style={{flex: 1}}>
<View style={styles.container}>
<Text style={styles.textStyle}>Blog Title</Text>
<View style={styles.container}>
<Text numberOfLines={50}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare arcu et tincidunt scelerisque. Morbi elementum mi cursus ex mollis, eget pharetra magna rhoncus. Maecenas felis ligula, euismod ut imperdiet ut, pretium molestie lectus. Aenean congue consectetur porttitor. Donec tempus aliquet est eu lobortis. Maecenas sit amet nunc vehicula, mollis velit id, pretium tellus. Fusce hendrerit fermentum ex, nec bibendum libero. Maecenas volutpat nisl vel nibh fermentum, id tincidunt odio pellentesque. Nulla facilisi.Nulla tincidunt mi vel maximus iaculis. Fusce in urna fringilla, molestie lorem at, condimentum justo. Etiam vel elementum erat, vitae ullamcorper sapien. Duis sed ante quis sem placerat feugiat. Cras consectetur tellus id sagittis malesuada. Curabitur a mauris lacus. Ut porttitor, lacus at congue dictum, nulla tortor rutrum lorem, non rhoncus augue tortor in urna.Nam finibus arcu velit, vel sagittis dui viverra vitae. Mauris interdum velit in convallis consectetur. Sed quis varius est, et eleifend magna. Phasellus fringilla sem ut tortor scelerisque, et ullamcorper erat rhoncus. Nunc luctus lorem at orci condimentum, sed suscipit lacus accumsan. Aenean nec sem nec erat placerat interdum. Ut non augue nec turpis tincidunt aliquam. Maecenas fringilla non ante vel finibus. Sed sed tellus nulla. Donec dapibus faucibus finibus. Suspendisse a venenatis urna. Nulla sodales malesuada ultrices. Quisque tincidunt augue vel mi pharetra egestas.
Praesent commodo dictum nibh, eu posuere justo maximus efficitur. Donec tristique, leo quis scelerisque convallis, felis nunc facilisis turpis, eu consequat nisl ipsum ut urna. Fusce eget tristique dolor. Nunc laoreet urna nunc, eget accumsan lectus varius quis. Donec egestas elit sed nulla sodales, eu mollis ante aliquet. Pellentesque tristique sem in porta porttitor. Pellentesque tempor consectetur nulla, eget finibus diam ornare non.Proin ante leo, rhoncus quis augue aliquet, tincidunt bibendum mi. In nec velit faucibus, laoreet orci sed, egestas nunc. Aliquam a condimentum arcu. Aliquam vel sodales ipsum. Vivamus a dapibus lacus, ut dignissim orci. Donec ante quam, eleifend a odio porta, lacinia fermentum mi. Morbi quam purus, dictum eget ante vel, ultricies varius nisl. Vestibulum vestibulum suscipit arcu, sed lobortis dolor tincidunt ut.
</Text>
</View>
</View>
</ScrollView>
);
}
}
var NavigationBarRouteMapper = {
LeftButton(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
onPress={() => navigator.parentNavigator.pop()}>
<Text style={{color: 'white', margin: 10,}}>
back
</Text>
</TouchableOpacity>
);
},
RightButton(route, navigator, index, navState) {
return null;
},
Title(route, navigator, index, navState) {
return (
<TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
<Text style={{color: '#FFFFFF', margin: 10, fontSize: 16}}>
List Detail Page
</Text>
</TouchableOpacity>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
thumb: {
width: 32,
height: 32,
},
row:{
flex:1,
flexDirection:'row',
padding:5,
borderBottomWidth: 1,
borderColor: '#d7d7d7',
},
selectionText:{
fontSize:15,
paddingTop:3,
color:'#000000',
textAlign:'right'
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#000000',
},
textStyle: {
fontSize:12,
color: '#FF0000',
paddingTop:50,
fontSize:36
},
navbarstyle: {
backgroundColor: '#000000',
alignItems: 'center',
height:50,
}
});
主页包含从json文件填充的列表视图。当我们点击列表视图中的一行时，我需要将相应的值发送到详细信息页面。让我知道怎么做。
答案 0 :(得分：0)
单击行时需要传递rowData。我修改了你的代码，请参阅下面的代码片段。然后，在详细信息页面中将数据用作this.props.data。
_pressRow(rowID,rowData) {
this.props.navigator.push({
id: 'DetailPage',
name: 'DetailPage',
data: rowData'
});
}