Skip to content

Commit 7ab923c

Browse files
itstriveitstrive
committed
add RN-demo and skill
1 parent 28932a6 commit 7ab923c

File tree

15 files changed

+855
-1
lines changed

15 files changed

+855
-1
lines changed

‎react-native-demo/RN-IOS-demo/demo1/index.ios.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
* @flow
5+
*/
6+
7+
import React, { Component } from 'react';
8+
import {
9+
AppRegistry,
10+
StyleSheet,
11+
Text,
12+
View,
13+
TabBarIOS,
14+
NavigatorIOS
15+
} from 'react-native';
16+
import Icon from 'react-native-vector-icons/Ionicons';
17+
18+
import Home from './ios_view/home.js'
19+
20+
class helloReact extends Component {
21+
constructor(props){
22+
super(props);
23+
24+
this.state={
25+
selectedTab:'home'
26+
};
27+
}
28+
29+
_renderContent(color: string, pageText: string, num?: number) {
30+
return (
31+
<View style={[styles.tabContent, {backgroundColor: color}]}>
32+
<Text style={styles.tabText}>{pageText}</Text>
33+
<Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
34+
</View>
35+
);
36+
}
37+
38+
render() {
39+
return (
40+
<TabBarIOS
41+
unselectedTintColor="yellow"
42+
tintColor="#fff"
43+
translucent={true}
44+
barTintColor="#000">
45+
<Icon.TabBarItem
46+
title="Home"
47+
iconName="ios-home-outline"
48+
selectedIconName="ios-home"
49+
selected={this.state.selectedTab === 'home'}
50+
onPress={() => {
51+
this.setState({
52+
selectedTab: 'home'
53+
});
54+
}}
55+
>
56+
57+
<NavigatorIOS
58+
ref="homeNavigator"
59+
style={{flex:1}}
60+
navigationBarHidden={true}
61+
initialRoute={{
62+
component:Home,
63+
name:'home',
64+
title:'主页'
65+
}}
66+
renderScence={(route,NavigatorIOS)=>{
67+
var Com=route.component;
68+
return <Com navigator={NavigatorIOS} />
69+
}}
70+
/>
71+
</Icon.TabBarItem>
72+
<Icon.TabBarItem
73+
title="news"
74+
iconName="ios-list-outline"
75+
selectedIconName="ios-list"
76+
badge={5}
77+
selected={this.state.selectedTab === 'news'}
78+
onPress={() => {
79+
this.setState({
80+
selectedTab: 'news'
81+
});
82+
}}>
83+
{this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
84+
</Icon.TabBarItem>
85+
<TabBarIOS.Item
86+
systemIcon="more"
87+
renderAsOriginal
88+
title="More"
89+
selected={this.state.selectedTab === 'greenTab'}
90+
onPress={() => {
91+
this.setState({
92+
selectedTab: 'greenTab',
93+
presses: this.state.presses + 1
94+
});
95+
}}>
96+
{this._renderContent('#21551C', 'Green Tab', this.state.presses)}
97+
</TabBarIOS.Item>
98+
</TabBarIOS>
99+
);
100+
}
101+
}
102+
103+
const styles = StyleSheet.create({
104+
105+
});
106+
107+
AppRegistry.registerComponent('helloReact', () => helloReact);

‎react-native-demo/RN-IOS-demo/demo1/ios_view/header.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { Component } from 'react';
2+
import {
3+
StyleSheet,
4+
Text,
5+
View,
6+
TabBarIOS
7+
} from 'react-native';
8+
9+
10+
class Header extends Component{
11+
componentDidMount(){
12+
//alert(this.props.btnBack)
13+
if(this.props.btnBack){
14+
alert(this.props.btnBack)
15+
}
16+
}
17+
render(){
18+
return (
19+
<View style={styles.headerBox}>
20+
<Text style={styles.headerTitle}>{this.props.title} Header</Text>
21+
</View>
22+
)
23+
}
24+
}
25+
26+
const styles=StyleSheet.create({
27+
headerBox:{
28+
flexDirection:'row',
29+
height:40,
30+
alignItems:'center',
31+
justifyContent:'center',
32+
backgroundColor:'#282828'
33+
},
34+
headerTitle:{
35+
color:'#fff'
36+
}
37+
});
38+
39+
export default Header;

‎react-native-demo/RN-IOS-demo/demo1/ios_view/home.js

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React, { Component } from 'react';
2+
import {
3+
StyleSheet,
4+
Text,
5+
View,
6+
ListView,
7+
Image,
8+
Dimensions,
9+
AlertIOS
10+
} from 'react-native';
11+
import Icon from 'react-native-vector-icons/Ionicons';
12+
13+
import News from './news.js'
14+
15+
16+
import Header from './header.js'
17+
18+
const {width, height}=Dimensions.get('window');
19+
20+
class Home extends Component{
21+
constructor(props){
22+
super(props);
23+
24+
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
25+
var data= [
26+
{
27+
"id": "54000019900401137X",
28+
"img": "http://dummyimage.com/1280x768/b5523b",
29+
"title": "Gqpvkv Klwmmxpk Ufxld Phkuwhcy"
30+
},
31+
{
32+
"id": "540000198803081433",
33+
"img": "http://dummyimage.com/1280x768/c80f23",
34+
"title": "Inkkg Ckpns Rhevir VfoudLviioyd Wfgwite Uhuyszoka"
35+
},
36+
{
37+
"id": "230000197410118592",
38+
"img": "http://dummyimage.com/1280x768/babc54",
39+
"title": "Mudvcb Nbkl Abg Thkp Nbw BneHjmuwnigt Tmg Tkcttcusp Ojfyeyysgp"
40+
},
41+
{
42+
"id": "530000199803284823",
43+
"img": "http://dummyimage.com/1280x768/ed6c02",
44+
"title": "Etxmi Cqpjgr Txibn Wufojjdcvj Rzjkn"
45+
},
46+
{
47+
"id": "340000197911205980",
48+
"img": "http://dummyimage.com/1280x768/6e10b8",
49+
"title": "Lrdvybtj Dimwgqslgk Jmzlxy Tvxia Wzebvsfbz Bleywe"
50+
},
51+
{
52+
"id": "520000200310174574",
53+
"img": "http://dummyimage.com/1280x768/410cbd",
54+
"title": "Pwo Ihcf Iybpssfbw Fgnqyiluic Fxipb"
55+
},
56+
{
57+
"id": "350000200502166040",
58+
"img": "http://dummyimage.com/1280x768/d2a04c",
59+
"title": "Csguqzn Gtmf Lhewpmyr Mqgi Hprn"
60+
},
61+
{
62+
"id": "350000201502060224",
63+
"img": "http://dummyimage.com/1280x768/4bf2aa",
64+
"title": "Ivboggg Sizvmdpsx Ebbn FwxhjIdaf Nkssufhe Ojdwhjo Uyjjlxx"
65+
}
66+
];
67+
this.state = {
68+
dataSource: ds.cloneWithRows(data),
69+
};
70+
}
71+
_changePage=(rowItem)=>{
72+
this.props.navigator.push({
73+
name:'news',
74+
component:News,
75+
passProps:{
76+
data:rowItem
77+
}
78+
});
79+
}
80+
_renderRow=(rowItem)=>{
81+
return (<View style={styles.rowBox}>
82+
<View style={styles.title}>
83+
<Text>{rowItem.title}</Text>
84+
</View>
85+
<View>
86+
<Image resizeMode="cover" source={{uri:rowItem.img}} style={styles.img} />
87+
<Icon onPress={this._changePage.bind(this,rowItem)} style={styles.icon} size={100} name="ios-play" color="#4F8EF7" />
88+
</View>
89+
</View>)
90+
}
91+
92+
render(){
93+
return (<View style={styles.container}>
94+
<Header title="Home" />
95+
<ListView
96+
dataSource={this.state.dataSource}
97+
renderRow={this._renderRow}
98+
automaticallyAdjustContentInsets={false}
99+
showsVerticalScrollIndicator={false}
100+
/>
101+
</View>)
102+
}
103+
}
104+
105+
const styles=StyleSheet.create({
106+
icon:{
107+
position:'absolute',
108+
backgroundColor:'transparent',
109+
left:(width)/2,
110+
top:(width * 0.6-100)/2
111+
},
112+
img:{
113+
width:width,
114+
height:width * 0.6
115+
},
116+
container:{
117+
flex:1,
118+
backgroundColor:'#fff',
119+
marginTop:20
120+
},
121+
rowBox:{
122+
alignItems:'center',
123+
justifyContent:'center'
124+
},
125+
title:{
126+
height:40,
127+
alignItems:'center',
128+
justifyContent:'center'
129+
}
130+
});
131+
132+
133+
export default Home;

‎react-native-demo/RN-IOS-demo/demo1/ios_view/more.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
home.js

‎react-native-demo/RN-IOS-demo/demo1/ios_view/news.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, {Component} from 'react'
2+
3+
import {
4+
StyleSheet,
5+
View,
6+
Text,
7+
Button
8+
} from 'react-native'
9+
import Icon from 'react-native-vector-icons/Ionicons';
10+
11+
import Header from './header'
12+
13+
class News extends Component{
14+
_backChange=()=>{
15+
this.props.navigator.pop();
16+
}
17+
render(){
18+
return (<View>
19+
<Header title="News"/>
20+
<Button onPress={this._backChange} title="返回"/>
21+
<View style={styles.textContainer}>
22+
<Text>From List: {this.props.data.id}</Text>
23+
</View>
24+
</View>)
25+
}
26+
}
27+
28+
const styles=StyleSheet.create({
29+
textContainer:{
30+
marginVertical:100,
31+
alignItems:'center',
32+
justifyContent:'center'
33+
}
34+
});
35+
36+
export default News;

0 commit comments

Comments
 (0)