0
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,
}
});
을이 HomePg
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 파일에서 채워지는 listview가 있습니다. 리스트 뷰에서 한 행을 클릭하면 해당 값을 detailpage에 보내야합니다. 나에게 어떻게하는지 알려줘.