React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用(2)

n7then 發(fā)布于2019-08-21 10:37 / 1908人閱讀

摘要：分別命名文件為和。上述代碼指定了當(dāng)某列書籍被點(diǎn)擊時(shí)響應(yīng)一個(gè)回調(diào)函數(shù)。當(dāng)組件的值改變時(shí)例如用戶鍵入一些文本，將會(huì)調(diào)用組件，同時(shí)為組件指定一個(gè)回調(diào)函數(shù)。在調(diào)用時(shí)，回調(diào)函數(shù)和利用用戶輸入的數(shù)據(jù)將設(shè)置和屬性。

【編者按】本篇文章的作者是 Joyce Echessa——渥合數(shù)位服務(wù)創(chuàng)辦人，畢業(yè)于臺(tái)灣大學(xué)，近年來專注于協(xié)助客戶進(jìn)行 App 軟體以及網(wǎng)站開發(fā)。本篇文章中，作者介紹通過 React Native 框架構(gòu)建一個(gè)示例應(yīng)用的開發(fā)過程，使得網(wǎng)絡(luò)技術(shù)和移動(dòng)開發(fā)碰撞出絢麗火花！

React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用 (1)

在 render()函數(shù)中，使用 TabBarIOS 組件創(chuàng)建一個(gè)分頁列。別忘了添加你使用的組件到解構(gòu)賦值中，否則以后調(diào)用都需要使用完整名稱，比如 React.TabBarIOS。

我們創(chuàng)建了兩個(gè)分頁列項(xiàng)目。我們?yōu)槊恳粋€(gè)項(xiàng)目設(shè)置選中狀態(tài)，并定義一個(gè)該項(xiàng)目被點(diǎn)擊時(shí)所調(diào)用的函數(shù)。以精選標(biāo)簽為例，我們之前定義的 selectedTab 狀態(tài)為「featured」，那么 selected 設(shè)置為 true，否則將被設(shè)置為 false。對(duì)于搜索標(biāo)簽頁也一樣，需要檢查 selectedTab 是否為「search」。一旦項(xiàng)目的 selected 設(shè)置為true，將成為激活狀態(tài)標(biāo)簽。我們用系統(tǒng)圖標(biāo)表示標(biāo)簽欄項(xiàng)目。

需要注意的是，我們使用的自定義組件標(biāo)簽，和其他的組件一樣。例如，我們需要相應(yīng)的模塊，并將其分配給一個(gè)變量，你可以使用變量來調(diào)用模塊。結(jié)果如同組件類的 render()函數(shù)一樣，成為文件代碼的一部分。提醒一下，作者習(xí)慣使用變量名作為各自的類名，但這并不是必須，你可以用你喜歡的名稱。

當(dāng)一個(gè)標(biāo)簽欄項(xiàng)目點(diǎn)擊時(shí)，會(huì)調(diào)用在組件的 onPress 屬性中定義的回調(diào)函數(shù)。函數(shù)會(huì)為 selectedTab 屬性設(shè)置數(shù)值，這個(gè)屬性將最終確定哪個(gè)是活動(dòng)標(biāo)簽。

調(diào)用模擬器，按下 Command-R 重載該應(yīng)用。正如下圖所示。

添加導(dǎo)航欄

下一步，我們將添加一個(gè)導(dǎo)航欄，并將兩個(gè)文件添加到項(xiàng)目中。這些都將作為相應(yīng)標(biāo)簽出現(xiàn)在導(dǎo)航堆棧的根視圖。分別命名文件為 BookList.js 和 SearchBooks.js。

在 BookList.js 添加以下代碼。

javascript"use strict";

var React = require("react-native");

var {
    StyleSheet,
    View,
    Component
   } = React;

var styles = StyleSheet.create({

});

class BookList extends Component {
    render() {
        return (
            
                     
        );
    }
}

module.exports = BookList;



在 SearchBooks.js 中添加以下代碼。

javascript"use strict";

var React = require("react-native");

var {
    StyleSheet,
    View,
    Component
   } = React;

var styles = StyleSheet.create({

});

class SearchBooks extends Component {
    render() {
        return (
            
                     
        );
    }
}

module.exports = SearchBooks;


在這兩個(gè)文件中創(chuàng)建空白視圖模塊，并導(dǎo)出該模塊。

按照以下代碼修改 Featured.js。

javascript"use strict";

var React = require("react-native");
var BookList = require("./BookList");

var {
    StyleSheet,
    NavigatorIOS,
    Component
   } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

class Featured extends Component {
    render() {
        return (
                        
        );
    }
}

module.exports = Featured;


以上代碼使用 NavigatorIOS 組件來構(gòu)造一個(gè)導(dǎo)航控制器。我們將其初始路徑設(shè)定為 BookList 組件（這意味著 BookList 為其根視圖），并設(shè)置導(dǎo)航欄上方的標(biāo)題。

接著用以下代碼修改 Search.js。

javascript"use strict";

var React = require("react-native");
var SearchBooks = require("./SearchBooks");

var {
    StyleSheet,
    NavigatorIOS,
    Component
   } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

class Search extends Component {
    render() {
        return (
                        
        );
    }
}

module.exports = Search;


正如在 Featured.js 一樣，以上代碼創(chuàng)建導(dǎo)航控制器，再設(shè)置其初始路徑，接著為它設(shè)置標(biāo)題。

重載應(yīng)用，你可以看到以下界面。



獲取并顯示數(shù)據(jù)

現(xiàn)在，我們開始將數(shù)據(jù)添加到視圖中。起初，我們用虛構(gòu)數(shù)據(jù)構(gòu)建視圖，之后再從 API 獲取真實(shí)的數(shù)據(jù)。

在 BookList.js 中其他變量聲明的文件頂部，添加以下代碼。

javascriptvar FAKE_BOOK_DATA = [
    {volumeInfo: {title: "The Catcher in the Rye", authors: "J. D. Salinger", imageLinks: {thumbnail: "http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"}}}
];


如下圖所示修改解構(gòu)賦值，以添加更多組件。

javascriptvar {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
   } = React;


添加如下樣式。

javascriptvar styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF",
        padding: 10
    },
    thumbnail: {
        width: 53,
        height: 81,
        marginRight: 10
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 20,
        marginBottom: 8
    },
    author: {
        color: "#656565"
    }
});


如下圖所示，修改 BookList 類。

javascriptclass BookList extends Component {
    render() {
    var book = FAKE_BOOK_DATA[0];
        return (
            
                
                
                    {book.volumeInfo.title}
                    {book.volumeInfo.authors}
                
            
        );
    }
}


重新加載應(yīng)用，可以看到下圖界面。


在上面的代碼中，我們創(chuàng)建一個(gè) JSON 對(duì)象，非常類似于從 API 調(diào)用的對(duì)象。我們?yōu)橐槐緯膶?duì)象創(chuàng)建屬性和值。在類文件中，我們使用虛構(gòu)數(shù)據(jù)，只為了得到第一個(gè)元素，并用它來填充我們的視圖。我們使用圖像組件來加載圖像到視圖。需要注意的是，我們?cè)跇邮奖碇性O(shè)定其寬度和高度。如果在樣式表中指定圖像的尺寸，那么在視圖中將看不到圖像。

我們?yōu)槿萜髦付?flexDirection 為「row」的樣式。這樣的話，元素的子代也將繼承該風(fēng)格，默認(rèn)值是水平布局而不是縱向布局。請(qǐng)注意，我們是如何在組件內(nèi)包裝其他組件的。在上面代碼中，主容器中有兩個(gè)子元素——圖像和視圖。視圖也有自己的子類——兩個(gè)文本組件。

先布局圖像組件，然后再將視圖（rightContainer）水平放置在它旁邊。我們?yōu)?rightContainer 指定的 flex 風(fēng)格為1。這使得該視圖組件占據(jù)剩余空間，而不會(huì)遮擋圖像組件。如果你想看 flex 樣式的效果，可以為 rightContainer 添加以下代碼。

javascriptbackgroundColor: "red"


重新加載應(yīng)用，你會(huì)看到空間被 rightContainer 樣式組件占滿。但它不會(huì)遮擋到其他組件。之所以沒有延伸到整個(gè)屏幕，是因?yàn)橥馊萜髟O(shè)定了留白，而圖片也設(shè)置了右邊界。



刪除 rightContainer 的 flex 設(shè)定，再重新加載 App。現(xiàn)在組件只會(huì)占據(jù)適應(yīng)其內(nèi)容的足夠空間。



如果將 thumbnail 和 rightContainer 的  flex 樣式設(shè)置為2，它們將會(huì)占據(jù)同樣的寬度，比例為2:2（或者1:1）。你可以將其設(shè)置為任何需要的數(shù)值，比例會(huì)做出相應(yīng)的改變。



你可以嘗試不同的比例以得到你想要的結(jié)果。讓我們回到之前為 rightContainer 添加紅色背景的那一步，繼續(xù)下面的步驟。

添加列表視圖

React Native 有一個(gè) ListView 組件，顯示數(shù)據(jù)的滾動(dòng)行——也就是 iOS 中的表視圖。

首先，修改解構(gòu)語句顯示我們添加的更多的組件。

javascriptvar {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    TouchableHighlight
   } = React;


添加以下代碼到樣式表中。

javascriptseparator: {
       height: 1,
       backgroundColor: "#ffffdffffd"
   }


添加以下構(gòu)造函數(shù)到 BookList 類。

javascriptconstructor(props) {
       super(props);
       this.state = {
           dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
           })
       };
   }


最后添加以下函數(shù)。

javascriptcomponentDidMount() {
    var books = FAKE_BOOK_DATA;
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(books)
    });
   }


在構(gòu)造函數(shù)中，我們創(chuàng)建了一個(gè) ListView.DataSource 對(duì)象，并將其分配給 dataSource 屬性。DataSource 是一個(gè)接口，ListView 用它來確定在更新 UI 過程中哪些行發(fā)生了變化。我們提供了一個(gè)可以比較兩列是否相同的函數(shù)，用于確定數(shù)據(jù)列表是否變化。

當(dāng)組件被加載到 UI 視圖時(shí)，會(huì)調(diào)用 componentDidMount()函數(shù)。該函數(shù)一旦被調(diào)用，我們用數(shù)據(jù)對(duì)象中的數(shù)據(jù)來設(shè)置 datasource 屬性。

你可以使用下面的代碼來修改 render()函數(shù)。

javascriptrender() {
    return (
        
    );
}


將下面的函數(shù)添加到 BookList 類。

javascriptrenderBook(book) {
       return (
            
                
                    
                        
                        
                            {book.volumeInfo.title}
                            {book.volumeInfo.authors}
                        
                    
                    
                
            
       );
   }


以上代碼在 render()函數(shù)中創(chuàng)建了一個(gè) ListView 組件。這里的 datasource 屬性與之前設(shè)定的數(shù)值一致。然后調(diào)用 renderBook()函數(shù)顯示 ListView 中的各列數(shù)據(jù)。

在 renderBook()函數(shù)中，我們使用 TouchableHighlight 組件。這是一個(gè)包裝組件，能讓視圖正確響應(yīng)點(diǎn)擊行為。一旦點(diǎn)擊，該包裝組件的透明度就會(huì)降低，可以允許底層顏色透過，使得視圖變暗或變色。這樣的話，如果你點(diǎn)擊一個(gè) ListView 行，你會(huì)看到高亮色，就像之前設(shè)置的選擇表格視圖單元格時(shí)的響應(yīng)一樣。我們?cè)诜蛛x器的底部添加一個(gè)樣式為 separator 的空視圖組件。這樣的設(shè)定下，視圖會(huì)出現(xiàn)一個(gè)灰色的水平線，便于分割每行項(xiàng)目。

重載該應(yīng)用，你會(huì)看到只有一個(gè)單元的表格視圖。



現(xiàn)在將真實(shí)數(shù)據(jù)加載到應(yīng)用中。

從文件中移除 FAKE_BOOK_DATA 變量，并添加以下代碼。這是加載數(shù)據(jù)的網(wǎng)址。

javascriptvar REQUEST_URL = "https://www.googleapis.com/books/v1/volumes?q=subject:fiction";


修改解析聲明。

javascriptvar {
    Image,
    StyleSheet,
    Text,
    View,
    Component,
    ListView,
    TouchableHighlight,
    ActivityIndicatorIOS
   } = React;


添加以下樣式設(shè)定。

javascriptlistView: {
       backgroundColor: "#F5FCFF"
   },
   loading: {
       flex: 1,
       alignItems: "center",
       justifyContent: "center"
   }


用下面的代碼修改構(gòu)造函數(shù)。我們?yōu)榻M件的狀態(tài)對(duì)象添加另一個(gè)屬性，用來判斷視圖是否成功加載。

javascriptconstructor(props) {
       super(props);
       this.state = {
           isLoading: true,
           dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
           })
       };
   }


按下列代碼修改 componentDidMount()函數(shù)，并添加 fetchData()函數(shù)。 fetchData()將調(diào)用 Google 圖書 API，當(dāng)它響應(yīng)操作時(shí)，會(huì)將獲取的數(shù)據(jù)設(shè)置為 DataSource 屬性，同時(shí)將 isLoading 設(shè)置為 true。

javascriptcomponentDidMount() {
       this.fetchData();
   }

   fetchData() {
       fetch(REQUEST_URL)
       .then((response) => response.json())
       .then((responseData) => {
           this.setState({
               dataSource: this.state.dataSource.cloneWithRows(responseData.items),
               isLoading: false
           });
       })
       .done();
   }


修改 render()函數(shù)并添加 renderLoadingView()。我們添加一個(gè)檢查 isLoading，如果它的值為 true，就回到由 renderLoadingView()返回的視圖。這個(gè)視圖顯示活動(dòng)指示燈（一個(gè)轉(zhuǎn)盤），以及「正在載入書籍...」的字樣。當(dāng)加載完成后，你應(yīng)該看到表中的圖書清單。

javascriptrender() {
       if (this.state.isLoading) {
           return this.renderLoadingView();
       }

       return (
            
        );
}  

renderLoadingView() {
    return (
        
            
            
                Loading books...
            
        
    );
}


重新加載應(yīng)用，你會(huì)看到類似下圖的界面。



添加詳情視圖

如果你點(diǎn)擊表中的一個(gè)單元格，單元格將會(huì)突出顯示，但不會(huì)響應(yīng)其它操作。我們將添加一個(gè)詳情視圖，以顯示選擇當(dāng)前書的詳細(xì)信息。

在項(xiàng)目中新建文件，并命名為 BookDetail.js。將下面的代碼貼在該文件中。

javascript"use strict";

var React = require("react-native");

var {
    StyleSheet,
    Text,
    View,
    Component,
    Image
   } = React;

var styles = StyleSheet.create({
    container: {
        marginTop: 75,
        alignItems: "center"
    },
    image: {
        width: 107,
        height: 165,
        padding: 10
    },
    description: {
        padding: 10,
        fontSize: 15,
        color: "#656565"
    }
});

class BookDetail extends Component {
    render() {
        var book = this.props.book;
        var imageURI = (typeof book.volumeInfo.imageLinks !== "undefined") ? book.volumeInfo.imageLinks.thumbnail : "";
        var description = (typeof book.volumeInfo.description !== "undefined") ? book.volumeInfo.description : "";
        return (
            
                
                {description}
            
        );
    }
}

module.exports = BookDetail;


上述代碼的大部分內(nèi)容，我們之前已經(jīng)討論過，這里不再贅述。之前沒接觸過的是 props 屬性，其用途是獲取數(shù)據(jù)。通過設(shè)置 props 屬性，將數(shù)據(jù)傳遞到這個(gè)類。在代碼中，我們先獲得數(shù)據(jù)，隨后用數(shù)據(jù)填充視圖。

需要注意的是，我們?cè)O(shè)置了容器的上邊界。如果不這樣的話，視圖將從屏幕的最頂部開始，從而導(dǎo)致某些元素被導(dǎo)航欄遮擋。

在 BookList.js 中添加以下代碼。

javascriptvar BookDetail = require("./BookDetail");


修改 BookList 類中 render()函數(shù)的 TouchableHighlight。

javascript this.showBookDetail(book)}  underlayColor="#ffffdffffd">


上述代碼指定了當(dāng)某列書籍被點(diǎn)擊時(shí)響應(yīng)一個(gè)回調(diào)函數(shù)。粘貼下面的函數(shù)到該類。這將 BookDetail 視圖推送到導(dǎo)航堆棧中，并設(shè)置導(dǎo)航欄上的標(biāo)題可見。然后將該選中行有關(guān)的圖書對(duì)象傳遞給 BookDetail 類。

javascriptshowBookDetail(book) {
       this.props.navigator.push({
           title: book.volumeInfo.title,
           component: BookDetail,
           passProps: {book}
       });
   }


重載該 App，你能看到當(dāng)前選中書籍的詳細(xì)信息。



搜索

現(xiàn)在已經(jīng)完成了精選標(biāo)簽的主從視圖，我們將繼續(xù)完善搜索選項(xiàng)卡，使用戶能夠利用 API 查詢想要的書籍。

打開 SearchBooks.js 并按下面的代碼修改。

javascript"use strict";

var React = require("react-native");
var SearchResults = require("./SearchResults");
var {
    StyleSheet,
    View,
    Text,
    Component,
    TextInput,
    TouchableHighlight,
    ActivityIndicatorIOS
    } = React;

var styles = StyleSheet.create({
    container: {
        marginTop: 65,
        padding: 10
    },
    searchInput: {
        height: 36,
        marginTop: 10,
        marginBottom: 10,
        fontSize: 18,
        borderWidth: 1,
        flex: 1,
        borderRadius: 4,
        padding: 5
    },
    button: {
        height: 36,
        backgroundColor: "#f39c12",
        borderRadius: 8,
        justifyContent: "center",
        marginTop: 15
    },
    buttonText: {
        fontSize: 18,
        color: "white",
        alignSelf: "center"
    },
    instructions: {
        fontSize: 18,
        alignSelf: "center",
        marginBottom: 15
    },
    fieldLabel: {
        fontSize: 15,
        marginTop: 15
    },
    errorMessage: {
        fontSize: 15,
        alignSelf: "center",
        marginTop: 15,
        color: "red"
    }
});

class SearchBooks extends Component {

    constructor(props) {
        super(props);
        this.state = {
            bookAuthor: "",
            bookTitle: "",
            isLoading: false,
            errorMessage: ""
        };
    }


    render() {
        var spinner = this.state.isLoading ?
            (  ) :
            ( );
        return (
            
                Search by book title and/or author
                
                    Book Title:
                    
                
                
                    Author:
                    
                
                
                    Search
                
                {spinner}
                {this.state.errorMessage}
            
        );
    }

    bookTitleInput(event) {
        this.setState({ bookTitle: event.nativeEvent.text });
    }

    bookAuthorInput(event) {
        this.setState({ bookAuthor: event.nativeEvent.text });
    }

    searchBooks() {
        this.fetchData();
    }

    fetchData() {

        this.setState({ isLoading: true });

        var baseURL = "https://www.googleapis.com/books/v1/volumes?q=";
        if (this.state.bookAuthor !== "") {
            baseURL += encodeURIComponent("inauthor:" + this.state.bookAuthor);
        }
        if (this.state.bookTitle !== "") {
            baseURL += (this.state.bookAuthor === "") ? encodeURIComponent("intitle:" + this.state.bookTitle) : encodeURIComponent("+intitle:" + this.state.bookTitle);
        }

        console.log("URL: >>> " + baseURL);
        fetch(baseURL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({ isLoading: false});
                if (responseData.items) {

                    this.props.navigator.push({
                        title: "Search Results",
                        component: SearchResults,
                        passProps: {books: responseData.items}
                    });
                } else {
                    this.setState({ errorMessage: "No results found"});
                }
            })
            .catch(error =>
                this.setState({
                    isLoading: false,
                    errorMessage: error
                }))
            .done();
    }

}

module.exports = SearchBooks;


述代碼中，我們?cè)跇?gòu)造函數(shù)中設(shè)置了一些屬性：bookAuthor、bookTitle、isLoading 和 errorMessage。下面簡(jiǎn)要介紹下如何使用。

在 render()方法中，我們需要檢查 isLoading 值是否為 true，如果是則建立一個(gè)活動(dòng)指示器，否則則創(chuàng)建一個(gè)空視圖（后面會(huì)用到）。然后，我們創(chuàng)建一個(gè)被用來插入查詢的搜索表單。TextInput 用于接收輸入。當(dāng)組件的值改變時(shí)（例如用戶鍵入一些文本），將會(huì)調(diào)用 TextInput 組件，同時(shí)為組件指定一個(gè)回調(diào)函數(shù)。在調(diào)用時(shí)，回調(diào)函數(shù) bookTitleInput()和 bookAuthorInput()利用用戶輸入的數(shù)據(jù)將設(shè)置 bookAuthor 和 bookTitles 屬性。當(dāng)用戶按下搜索按鈕時(shí)，searchBooks()被調(diào)用。需要注意的是，React Native 沒有按鈕組件。所以，我們使用 TouchableHighlight 來代替，并用文本包裝，使它的樣式看起來像一個(gè)按鈕。當(dāng)按下搜索按鈕時(shí)，根據(jù)輸入的數(shù)據(jù)構(gòu)成一個(gè) URL。用戶可以通過書名、作者或書名+作者進(jìn)行搜索。如果結(jié)果成功返回，SearchResult 將被推到導(dǎo)航堆棧，否則提示錯(cuò)誤消息。我們還將響應(yīng)數(shù)據(jù)傳遞給 SearchResults 類。

創(chuàng)建一個(gè)文件并命名為 SearchResults.js，將下列代碼貼進(jìn)去。

javascript"use strict";

var React = require("react-native");
var BookDetail = require("./BookDetail");
var {
    StyleSheet,
    View,
    Text,
    Component,
    TouchableHighlight,
    Image,
    ListView
    } = React;

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    title: {
        fontSize: 20,
        marginBottom: 8
    },
    author: {
        color: "#656565"
    },
    separator: {
        height: 1,
        backgroundColor: "#ffffdffffd"
    },
    listView: {
        backgroundColor: "#F5FCFF"
    },
    cellContainer: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF",
        padding: 10
    },
    thumbnail: {
        width: 53,
        height: 81,
        marginRight: 10
    },
    rightContainer: {
        flex: 1
    }
});

class SearchResults extends Component {

    constructor(props) {
        super(props);

        var dataSource = new ListView.DataSource(
            {rowHasChanged: (row1, row2) => row1 !== row2});
        this.state = {
            dataSource: dataSource.cloneWithRows(this.props.books)
        };
    }

    render() {

        return (
            
        );
    }

    renderBook(book) {
        var imageURI = (typeof book.volumeInfo.imageLinks !== "undefined") ? book.volumeInfo.imageLinks.thumbnail : "";

        return (
             this.showBookDetail(book)}
                                underlayColor="#ffffdffffd">
                
                    
                        
                        
                            {book.volumeInfo.title}
                            {book.volumeInfo.authors}
                        
                    
                    
                
            
        );
    }

    showBookDetail(book) {

        this.props.navigator.push({
            title: book.volumeInfo.title,
            component: BookDetail,
            passProps: {book}
        });
    }

}

module.exports = SearchResults;


以上代碼之前已經(jīng)討論過，也不再贅述。代碼中獲得數(shù)據(jù)，并將數(shù)據(jù)通過 props 屬性傳遞到類，同時(shí)創(chuàng)建填充了數(shù)據(jù)的 ListView。

作者注意到，在 API中，當(dāng)你按作者搜索時(shí)，結(jié)果不一定是書的數(shù)據(jù)，而是作者自身的信息。這意味著某些行的 book.volumeInfo.imageLinks.thumbnail 和 book.volumeInfo.description 有未定義的值。所以我們稍作檢查，如果沒有圖像則顯示一個(gè)空視圖。否則，我們的應(yīng)用將試圖加載不存在的圖像，這樣會(huì)容易引發(fā)崩潰。

我們使用之前用過的 BookDetail 組件，來顯示每本書的詳細(xì)信息。如圖所示，打開 BookDetail.js 并修改 render()函數(shù)。在用數(shù)據(jù)填充視圖之前，檢查傳入的數(shù)據(jù)是否有相關(guān)圖像和詳細(xì)信息。如果嘗試載入的書籍沒有詳情或圖片，對(duì)應(yīng)的區(qū)域?qū)⑹强瞻?。你可以向用戶提示一個(gè)錯(cuò)誤信息，在此我們省略該步驟。

javascriptrender() {
    var book = this.props.book;
    var imageURI = (typeof book.volumeInfo.imageLinks !== "undefined") ? book.volumeInfo.imageLinks.thumbnail : "";
    var description = (typeof book.volumeInfo.description !== "undefined") ? book.volumeInfo.description : "";
    return (
        
            
            {description}
        
    );
}


重載應(yīng)用，會(huì)看到搜索書籍的界面。



結(jié)束語

盡管仍在不斷完善，React Native 看起來很有希望成為構(gòu)建移動(dòng)應(yīng)用的另一種選擇。它為 Web 開發(fā)人員開啟了一扇門，讓他們能夠在移動(dòng)開發(fā)領(lǐng)域一探究竟。同時(shí)為移動(dòng)開發(fā)者提供了一種簡(jiǎn)化開發(fā)流程的新方式。

隨著項(xiàng)目的發(fā)展，讓我們拭目以待 React Native 和應(yīng)用開發(fā)（iOS和Android ——或者別的平臺(tái)）將會(huì)碰撞出什么樣的火花。同時(shí)，如果你需要進(jìn)一步確認(rèn)網(wǎng)絡(luò)技術(shù)是否能用于實(shí)現(xiàn)真正的原生體驗(yàn)，你可以看看這些由 React Native 構(gòu)建的應(yīng)用：Facebook Ads Manager（完全由 React Native 構(gòu)建）以及 Facebook Groups（React Native 和 Objective-C 構(gòu)建的混合應(yīng)用）。

「學(xué)習(xí)一次，在任何地方應(yīng)用」。單這一句足以證明學(xué)習(xí) React Native 框架的意義。

你可以在這里下載完整示例項(xiàng)目。

為了更進(jìn)一步了解 React Native，你可以參考下列視頻和資料。

  
React Native 簡(jiǎn)介
  深入 React Native
  React Native 接力：將現(xiàn)代網(wǎng)頁技術(shù)推向移動(dòng)開發(fā)世界
  


你可以在這下載 Xcode 項(xiàng)目，僅供參考。（完結(jié)）

React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用 (1)

原文地址：http://www.appcoda.com/react-native-introduction/

本文系 OneAPM 工程師編譯整理。想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問 OneAPM 官方博客。


            
                     
                 
                                                                                                                    
                         云服務(wù)器
                                             
                         GPU云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               React Native
                                                                                                           webrtc react native
                                                                                                           react native webrtc
                                                                                                           react-native
                                                         
                 
               
              
             
               
                    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85875.html
               
                      
               
                 
                                  上一篇：JS函數(shù)式編程讀書筆記 - 2  
                                                
                                       下一篇：jQuery綁定事件的覆蓋


              
                相關(guān)文章
                
                             
                                                                    
                                                
                          React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用 (1)
                                                     摘要：利用來搭建代碼。雖然這不是安裝的唯一方式，但我發(fā)現(xiàn)，是非常好用的包管理器。終端窗口打開后，會(huì)啟動(dòng)，并由服務(wù)器處理以上請(qǐng)求。面對(duì)這種情況時(shí)，需要關(guān)閉終端窗口，停止在上的應(yīng)用，并重新運(yùn)行。使用設(shè)定應(yīng)用的用戶界面。命名這兩個(gè)文件為和。

【編者按】本篇文章的作者是 Joyce Echessa——渥合數(shù)位服務(wù)創(chuàng)辦人，畢業(yè)于臺(tái)灣大學(xué)，近年來專注于協(xié)助客戶進(jìn)行 App 軟體以及網(wǎng)站開發(fā)。本篇文章中，...
                                                   
                          
                                
                                    xiaoqibTn
                                    2019-08-21 10:37
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                     
                                                                                                                       
                                                
                          大前端2018現(xiàn)在上車還還得及么
                                                     摘要：面向?qū)ο笕筇卣骼^承性多態(tài)性封裝性接口。第五階段封裝一個(gè)屬于自己的框架框架封裝基礎(chǔ)事件流冒泡捕獲事件對(duì)象事件框架選擇框架。核心模塊和對(duì)象全局對(duì)象，，，事件驅(qū)動(dòng)，事件發(fā)射器加密解密，路徑操作，序列化和反序列化文件流操作服務(wù)端與客戶端。

第一階段：
HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、
JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對(duì)...
                                                   
                          
                                
                                    stormgens
                                    2019-08-01 18:25
                                    評(píng)論0 
                                    收藏0 
                                
                          
                      
                     
                                                                           
                
              
              
               
                  
                  發(fā)表評(píng)論
                   
                                      
                      
                        登陸后可評(píng)論
                      
                   
               
              
                
                  0條評(píng)論


           
               
                
                    
                    n7then
                    男|高級(jí)講師
                    
                     
                                                                      我要關(guān)注
      
                                                                                        我要私信
                     
                                            
                    
                    
                          TA的文章
                          閱讀更多
                    
                      
                                                  jsp代碼實(shí)例第105課
                            閱讀 3336·2021-11-23 09:51
                                                       OneTechCloud：雙11鉅惠正式開啟！日本CN2上新，全場(chǎng)季付8折，充值余額多送10%
                            閱讀 2465·2021-11-09 09:46
                                                       Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>
                            閱讀 1496·2019-08-30 15:54
                                                       HTML,CSS,JavaScript的思維導(dǎo)圖
                            閱讀 3158·2019-08-30 14:22
                                                       2017-05-28 前端日?qǐng)?bào)
                            閱讀 2922·2019-08-29 12:40
                                                       Javascript克隆對(duì)象
                            閱讀 1647·2019-08-26 10:33
                                                       終于搞懂這些的區(qū)別了 clientX、offsetX、screenX、pageX
                            閱讀 1792·2019-08-23 17:09
                                                       es6刪除數(shù)組元素或者對(duì)象元素
                            閱讀 1569·2019-08-23 16:11
                                                
                      
                

                   
              
  
                  最新活動(dòng)

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用(2)

相關(guān)文章

React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用 (1)

大前端2018現(xiàn)在上車還還得及么

發(fā)表評(píng)論

0條評(píng)論

n7then

男|高級(jí)講師

TA的文章

jsp代碼實(shí)例第105課

OneTechCloud：雙11鉅惠正式開啟！日本CN2上新，全場(chǎng)季付8折，充值余額多送10%

Css Sprite(雪碧圖、精靈圖)<圖像拼合技術(shù)>

HTML,CSS,JavaScript的思維導(dǎo)圖

2017-05-28 前端日?qǐng)?bào)

Javascript克隆對(duì)象

終于搞懂這些的區(qū)別了 clientX、offsetX、screenX、pageX

es6刪除數(shù)組元素或者對(duì)象元素

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

React Native 簡(jiǎn)介：用 JavaScript 搭建 iOS 應(yīng)用(2)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！