我的第一個RN應用(漂亮的首頁和笑話列表)
阿新 • • 發佈:2017-10-31
native exp index shee str import 折騰 load port
對於不想折騰Android(or Kotlin)的Phper來說,要寫app,RN真的是個不錯的選擇。
開發環境就不多說了,用npm輕松搞定,容易被墻,自行解決。
先看下目錄結構吧:
index.android.js裏面import ‘./App‘,App.js裏面處理首頁展示跟邏輯:
import React, {Component} from ‘react‘;
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
StatusBar,
} from ‘react-native‘;
import { StackNavigator } from ‘react-navigation‘;
import Joke from ‘./components/Joke‘;
export default class HomeScreen extends Component {
static navigationOptions = {
title: ‘Welcome‘,
};
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="blue" barStyle="light-content"/>
<Image source={require(‘./images/sh.jpeg‘)} style={styles.img}/>
<Text style={styles.mid}>Purelightme && TT</Text>
<TouchableOpacity onPress={()=>this.props.navigation.navigate(‘Joke‘,{ user: ‘亭亭‘})} title="Joke time"><Text style={styles.btn}>開啟奇幻之旅</Text></TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘white‘
},
img: {
width: 240,
height: 240,
borderWidth: 2,
borderColor: ‘#ee735c‘,
borderRadius: 120,
opacity: 0.9,
},
mid: {
marginTop: 50,
//transform: [{scale:2},{rotateX:‘120deg‘}]
},
btn: {
height: 25,
marginTop: 40,
borderWidth: 2,
borderStyle: ‘dotted‘,
borderColor: ‘gray‘,
borderRadius: 2,
textAlign: ‘center‘,
lineHeight: 25,
}
});
const FirstApp = StackNavigator({
Home: { screen: HomeScreen},
Joke: { screen: Joke},
});
AppRegistry.registerComponent(‘FirstApp‘, () => FirstApp);
Joke組件在components下的Joke.js:
import React, {Component} from ‘react‘;
import {
View,
Text,
StyleSheet,
ListView,
} from ‘react-native‘;
import TWebView from ‘components/TWebView‘;
class Joke extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
}
}
componentDidMount() {
this._getJoke();
}
static navigationOptions = {
title: ‘講個笑話‘,
};
_getJoke() {
fetch(‘https://v.juhe.cn/joke/randJoke.php?key=e3f934b3cee28f02ea95eb17044e0cd0‘)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseJson.result),
loaded: true,
})
})
.catch((error) => {
console.error("出錯啦!");
console.error(error);
});
}
_renderJoke(joke) {
return (
<View style={styles.container}>
<Text style={styles.content}>{joke.content}</Text>
</View>
);
}
render() {
if (!this.state.loaded) {
return (
<View style={styles.container}>
<Text>數據正在加載中</Text>
</View>
);
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderJoke}
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘white‘
},
content: {
marginTop: 10,
},
});
module.exports = Joke;
主要用到了RN的StackNavigator,ListView,Image和Text就不說啦,fetch發起網絡請求,數據來自聚合數據,後面打算結合百度AI的語音轉換實現自動播放笑話,sounds good! nice RN.
我的第一個RN應用(漂亮的首頁和笑話列表)