在React Native中創(chuàng)建“Hello World”程序
- 創(chuàng)建項(xiàng)目
- 使用Xcode
- 使用模擬器
React基礎(chǔ)
應(yīng)用中會(huì)用到的組件列表魏保。
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
- render函數(shù)
使用以下這段代碼，我們能夠創(chuàng)建一個(gè)自定義組件：
class GithubFinder extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
在這個(gè)組件中蝙场，我們只包含了一個(gè)方法：render，這個(gè)方法沒(méi)有參數(shù)，只是簡(jiǎn)單地返回我們希望這個(gè)組件渲染出來(lái)的視圖。
- 樣式
在我們的組件中兰吟，我們能夠看到styles屬性。我們?cè)谖募撞慷x他們的取值：
const 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,
},
});
調(diào)用StyleSheet.create函數(shù)能夠創(chuàng)建很多不同的樣式規(guī)則茂翔，可以把它們想成CSS規(guī)則混蔼，用來(lái)在每個(gè)條目中定義不同的樣式。這里flex是Flexbox的屬性珊燎，可以用來(lái)定義內(nèi)容在視圖中的布局惭嚣，比如將一個(gè)項(xiàng)目放到另一個(gè)項(xiàng)目的左邊，或者諸如此類(lèi)的事情俐末。我們可以通過(guò)styles.container來(lái)定義相應(yīng)View組件的樣式料按。
對(duì)于已經(jīng)做過(guò)Objective-C開(kāi)發(fā)的人來(lái)說(shuō)，這種類(lèi)似CSS的樣式定義方式要比使用接口來(lái)構(gòu)建樣式容易得多卓箫，它將節(jié)省我們大量的時(shí)間载矿。除此之外，我們不需要重新加載整個(gè)應(yīng)用來(lái)查看樣式的變化烹卒，只需要在模擬器中使用Cmd＋R組合鍵就可以看到文本的變化了闷盔，太神奇了！
注意旅急，React CSS是常用CSS的一個(gè)子集逢勾。可以看到藐吮，大多數(shù)的屬性會(huì)稍微修改一下名稱(chēng)溺拱，比如text-align會(huì)寫(xiě)成textAlign。
- 注冊(cè)組件
最后谣辞，在文件的末尾有這樣一行代碼：
AppRegistry.registerComponent('GithubFinder', () => GithubFinder);
AppRegistry.registerComponent方法用來(lái)注冊(cè)我們的組件迫摔。這意味著，當(dāng)iOS應(yīng)用開(kāi)始運(yùn)行時(shí)泥从，GithubFinder組件是出現(xiàn)的第一個(gè)組件句占。因此，當(dāng)我們的應(yīng)用開(kāi)始運(yùn)行的時(shí)候躯嫉，它就知道該怎么做了纱烘。這個(gè)方法的調(diào)用一般會(huì)放到我們React Native應(yīng)用代碼的最后一行，基本上是開(kāi)啟應(yīng)用的方式之一祈餐。
- 修改組建
現(xiàn)在我們已經(jīng)理解組件了擂啥，讓我們?cè)囍薷南滤鼈儭Ｐ薷膔ender 函數(shù)如下：
class GithubFinder extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
This is my first custom view!
</Text>
<Image
source={{uri : 'http://upload-images.jianshu.io/upload_images/629934-74052f8714dc122c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'}}
style={styles.customimg}
/>
</View>
);
}
}
你可能已經(jīng)注意到了帆阳，當(dāng)我們使用變量時(shí)哺壶，使用了｛｝符號(hào)。我們能通過(guò)這種方式把一個(gè)變量名添加到HTML中。在這里這么做的原因是我們想要給節(jié)點(diǎn)增加樣式变骡，比如說(shuō)离赫，我們提到的styles 變量，不再僅僅是簡(jiǎn)單的關(guān)鍵字‘styles’了塌碌。此外渊胸，對(duì)于標(biāo)簽中的sources屬性，我們用兩對(duì)｛｝來(lái)表示一個(gè)JavaScript對(duì)象台妆，這個(gè)對(duì)象是用在節(jié)點(diǎn)屬性中翎猛。
參考下面的內(nèi)容修改一下樣式對(duì)象，為Image對(duì)象增加寬和高接剩。
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
customimg: {
width: 200,
height: 200
},
});
另外還有意見(jiàn)要做的事切厘，即增加我們當(dāng)前使用的Image組件的聲明，在文件的開(kāi)頭修改React 對(duì)象懊缺。如下：
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image
} from 'react-native';
現(xiàn)在疫稿，我們應(yīng)用的呆啊看起來(lái)是下面這樣的：
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image
} from 'react-native';
class GithubFinder extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
This is my first custom view!
</Text>
<Image
source={{uri : 'http://upload-images.jianshu.io/upload_images/629934-74052f8714dc122c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'}}
style={styles.customimg}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
customimg: {
width: 200,
height: 200
},
});
AppRegistry.registerComponent('GithubFinder', () => GithubFinder);
應(yīng)用界面是這樣的：
喔！現(xiàn)在你已經(jīng)實(shí)現(xiàn)了自己的第一個(gè)自定義View鹃两。
搜索框和數(shù)據(jù)檢索
現(xiàn)在我們將要獲取數(shù)據(jù)了遗座，要實(shí)現(xiàn)這個(gè)功能，就要使用到GitHub的API俊扳，這樣非常簡(jiǎn)單而且容易上手途蒋。讓我們開(kāi)始吧。
- 增加搜索框
首先馋记，需要添加搜索框号坡。我們將使用一個(gè)普通的TextInput和一些樣式來(lái)實(shí)現(xiàn)搜索框。參考如下的代碼來(lái)修改render 方法：
class GithubFinder extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput}/>
</View>
);
}
}
基本上我們創(chuàng)建完成了有一些不同屬性的TextInpust對(duì)象梯醒，我們不需要自動(dòng)填充和自動(dòng)更正的功能宽堆，只需增加placeholder 文本和一些樣式。樣式如下：
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
searchBarInput: {
marginTop: 30,
padding: 5,
fontSize: 15,
height: 30,
backgroundColor: '#EAEAEA',
},
});
我們修改了TextInput背景顏色來(lái)讓它更明顯冤馏，設(shè)置了height和margin-top日麸，增加了padding寄啼。修改完成以后逮光，看起來(lái)如下圖：
- 方法代理
現(xiàn)在，我們需要用戶(hù)在搜書(shū)框輸入的時(shí)候墩划，調(diào)用API來(lái)進(jìn)行搜索涕刚。要做到這一點(diǎn)，我么你需要完成方法的代理綁定乙帮，就是指當(dāng)有一些行為發(fā)生時(shí)執(zhí)行某個(gè)函數(shù)杜漠，在當(dāng)前情況下的行為就是在搜索框停止輸入。要做到這一點(diǎn)，我們只要設(shè)置文本框的onEndEditing屬性驾茴，如下：
class GithubFinder extends Component {
render() {
return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput}
onEndEditing={this.onSearchChange}/>
</View>
);
}
}
當(dāng)搜索內(nèi)容變化的時(shí)候盼樟，調(diào)用GitHub API查詢(xún)結(jié)果的功能還沒(méi)有實(shí)現(xiàn)，我們下面就來(lái)實(shí)現(xiàn)這個(gè)功能锈至。
- 檢索數(shù)據(jù)
現(xiàn)在我們來(lái)實(shí)現(xiàn)onSearchChange函數(shù)晨缴，通過(guò)GitHub的API來(lái)查詢(xún)結(jié)果。如下：
var BASE_URL = 'https://api.github.com/search/repositories?q=';
class GithubFinder extends Component {
//渲染UI
render() {
return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput}
onEndEditing={this.onSearchChange}/>
</View>
);
},
//檢索數(shù)據(jù)
onSearchChange: function(event: object) {
var searchTerm = event.nativeEvent.text.toLowerCase();
var queryURL = BASE_URL + encodeURIComponent(searchTerm);
fetch(queryURL)
.then((response) => response.json())
.then((responseData) => {
if (responseData.items) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.items),
});
};
})
.done();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
searchBarInput: {
marginTop: 30,
padding: 5,
fontSize: 15,
flex: 1,
height: 30,
backgroundColor: '#EAEAEA',
},
});
AppRegistry.registerComponent('GithubFinder', () => GithubFinder);
顯示結(jié)果
現(xiàn)在我們有了自己點(diǎn)數(shù)據(jù)峡捡，接下來(lái)我們讓結(jié)果列表形式呈現(xiàn)击碗，在這個(gè)列表視圖中，每一行都對(duì)應(yīng)一條通過(guò)搜索GitHub返回的數(shù)據(jù)们拙。開(kāi)始吧稍途！
- 組建狀態(tài)
在前一節(jié)中，我們調(diào)用了this.setState方法砚婆，這是我們還沒(méi)有介紹的React的一個(gè)重要概念械拍。每一個(gè)組件都有自己的狀態(tài)（state），用來(lái)存儲(chǔ)組件的數(shù)據(jù)装盯。在這個(gè)例子中殊者，我們希望能夠存儲(chǔ)當(dāng)前列表中顯示的數(shù)據(jù)。當(dāng)我們的組件首次被渲染的時(shí)候验夯，可以通過(guò)getInitialState方法來(lái)初始化狀態(tài)猖吴。如下：
class GithubFinder extends Component {
//組件狀態(tài)
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
},
//渲染UI
render() {
return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput}
onEndEditing={this.onSearchChange}/>
</View>
);
},
//檢索數(shù)據(jù)
onSearchChange: function(event: object) {
var searchTerm = event.nativeEvent.text.toLowerCase();
var queryURL = BASE_URL + encodeURIComponent(searchTerm);
fetch(queryURL)
.then((response) => response.json())
.then((responseData) => {
if (responseData.items) {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.items),
});
};
})
.done();
}
}
注意，因?yàn)槲覀冊(cè)谶@里使用ListView挥转，所以我們需要把它添加到文件最開(kāi)始的組件列表中海蔽，如下：
import React, {
AppRegistry,
Component,
StyleSheet,
View,
TextInput
ListView,
} from 'react-native';
在這里，我們通過(guò)屬性創(chuàng)建了一個(gè)空白的數(shù)據(jù)源绑谣，該函數(shù)用來(lái)監(jiān)控一行數(shù)據(jù)是否發(fā)生了變化党窜。其實(shí)很簡(jiǎn)答，這個(gè)函數(shù)的作用就是：如果兩次的數(shù)據(jù)不相同的話借宵，告訴數(shù)據(jù)源該行為數(shù)據(jù)發(fā)生了變化幌衣。
現(xiàn)在我們已經(jīng)設(shè)置好初始狀態(tài)了，而且我們的數(shù)據(jù)檢索方法已經(jīng)能夠通過(guò)搜索結(jié)果來(lái)成功地設(shè)置數(shù)據(jù)源的內(nèi)容行了壤玫。以后如果獲取到新數(shù)據(jù)豁护，就能夠通過(guò)修改數(shù)據(jù)源來(lái)改變內(nèi)容行的顯示了。
- 創(chuàng)建ListView組件
現(xiàn)在欲间，我們需要?jiǎng)?chuàng)建列表視圖來(lái)顯示已經(jīng)加載的數(shù)據(jù)源結(jié)果楚里。通過(guò)在render 方法中添加一個(gè)組件來(lái)實(shí)現(xiàn)這個(gè)效果：
//渲染UI
render() {
var content;
if (this.state.dataSource.getRowCount() === 0) {
content =
<Text>
Please enter a search term to see results.
</Text>;
} else {
content =
<ListView
ref="listView"
dataSource={this.state.dataSource}
renderRow={this.renderRow}
automaticallyAdjustContentInsets={false}
keyboardDismissMode="onDrag"
keyboardShouldPersistTaps={true}/>;
};
return (
<View style={styles.container}>
<TextInput
autoCapitalize="none"
autoCorrect={false}
placeholder="Search for a project..."
style={styles.searchBarInput}
onEndEditing={this.onSearchChange}/>
{content}
</View>
);
},
- 創(chuàng)建每個(gè)數(shù)據(jù)單元
現(xiàn)在我們要渲染每一條結(jié)果數(shù)據(jù)了。我們來(lái)實(shí)現(xiàn)一個(gè)方法猎贴，通過(guò)this.renderRow來(lái)完成方法的綁定班缎，從而達(dá)到渲染數(shù)據(jù)的效果蝴光。方法的實(shí)現(xiàn)如下：
renderRow: function(repo: Object) {
return (
<View>
<View style={styles.row}>
<Text>
{repo.name}
</Text>
</View>
<View style={styles.cellBorder} />
</View>
);
},
在這里，我們創(chuàng)建了一個(gè)基本的結(jié)果條目达址，用來(lái)顯示搜索結(jié)果中的名稱(chēng)蔑祟。我們給styles增加兩個(gè)樣式規(guī)則，row和cellBorder沉唠，用來(lái)渲染這個(gè)結(jié)果條目做瞪。
row: {
alignItems: 'center',
backgroundColor: 'white',
flexDirection: 'row',
padding: 5,
},
cellBorder: {
backgroundColor: 'rgba(0, 0, 0, 0.1)',
height: 1,
marginLeft: 4,
},
未完，待續(xù)右冻。
