第一個react-native工程,簡單點
阿新 • • 發佈:2019-01-06
推薦一個學習react-native的好網站,是將react-native在github上面的文章翻譯過來的中文網站,挺適合一個入門react-native的人學習,http://reactnative.cn/,學的時候最好選擇最新的學習,我選擇的是0.39版本。
附上截圖:
也沒啥好講的,自己也是剛學沒幾天,就當做個筆記吧。修改的是index.android.js這個檔案,修改之後安裝到手機上就可以看見,寫的亂糟糟的,瞎看看。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React from 'react';
import { AppRegistry, StyleSheet, Text, View, ListView, Image} from 'react-native';
class Greeting extends React.Component {
render() {
return (
<Text>
Hello {this.props.name}!
</Text>
);
}
}
class Blink extends React.Component {
constructor(props) {
super(props);
this.state = { showText: true };
// 每1000毫秒對showText狀態做一次取反操作
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 500);
}
render() {
// 根據當前showText的值決定是否顯示text內容
let display = this.state.showText ? this.props.text : "麼得" ;
return (
<Text>{display}</Text>
);
}
}
class test extends React.Component {
// 初始化模擬資料
constructor(props) {
super(props);
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'caojunsheng', 'hahaha', 'demo', 'hello', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'caojunsheng', 'hahaha'])
};
}
render() {
let pic = {
uri: 'http://pic37.nipic.com/20140104/9885883_151644517000_2.jpg'
};
return (
<View>
<Text>
<Text>First part and </Text>
<Text>second part</Text>
</Text>
<View>
<Text>First part and </Text>
<Text>second part</Text>
</View>
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
{' and red'}
</Text>
</Text>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
<View>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
<Image source={pic} style={{width:200,height: 110}} />
<Text style={styles.textstyle1}>
{"一個listview列表啊"}
</Text>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text style={styles.textstyle}>{rowData}</Text>}
style={styles.container}
/>
</View>
);
}
}
class LotsOfGreetings extends React.Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
},
textstyle:{
marginLeft:20,
fontSize: 30
},
textstyle1:{
textAlignVertical: 'center',
fontSize: 30,
color: "#FF4500"
},
});
AppRegistry.registerComponent('test', () => test);