React Native 简介：用 JavaScript 搭建 iOS 应用(2)

tigerZH 发布于2019-06-25 14:29 / 1263人阅读

摘要：分别命名文件为和。上述代码指定了当某列书籍被点击时响应一个回调函数。当组件的值改变时例如用户键入一些文本，将会调用组件，同时为组件指定一个回调函数。在调用时，回调函数和利用用户输入的数据将设置和属性。

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，作者介绍通过 React Native 框架构建一个示例应用的开发过程，使得网络技术和移动开发碰撞出绚丽火花！

React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

在 render()函数中，使用 TabBarIOS 组件创建一个分页列。别忘了添加你使用的组件到解构赋值中，否则以后调用都需要使用完整名称，比如 React.TabBarIOS。

我们创建了两个分页列项目。我们为每一个项目设置选中状态，并定义一个该项目被点击时所调用的函数。以精选标签为例，我们之前定义的 selectedTab 状态为「featured」，那么 selected 设置为 true，否则将被设置为 false。对于搜索标签页也一样，需要检查 selectedTab 是否为「search」。一旦项目的 selected 设置为true，将成为激活状态标签。我们用系统图标表示标签栏项目。

需要注意的是，我们使用的自定义组件标签，和其他的组件一样。例如，我们需要相应的模块，并将其分配给一个变量，你可以使用变量来调用模块。结果如同组件类的 render()函数一样，成为文件代码的一部分。提醒一下，作者习惯使用变量名作为各自的类名，但这并不是必须，你可以用你喜欢的名称。

当一个标签栏项目点击时，会调用在组件的 onPress 属性中定义的回调函数。函数会为 selectedTab 属性设置数值，这个属性将最终确定哪个是活动标签。

调用模拟器，按下 Command-R 重载该应用。正如下图所示。

添加导航栏

下一步，我们将添加一个导航栏，并将两个文件添加到项目中。这些都将作为相应标签出现在导航堆栈的根视图。分别命名文件为 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;


在这两个文件中创建空白视图模块，并导出该模块。

按照以下代码修改 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 组件来构造一个导航控制器。我们将其初始路径设定为 BookList 组件（这意味着 BookList 为其根视图），并设置导航栏上方的标题。

接着用以下代码修改 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 一样，以上代码创建导航控制器，再设置其初始路径，接着为它设置标题。

重载应用，你可以看到以下界面。



获取并显示数据

现在，我们开始将数据添加到视图中。起初，我们用虚构数据构建视图，之后再从 API 获取真实的数据。

在 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"}}}
];


如下图所示修改解构赋值，以添加更多组件。

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}
                
            
        );
    }
}


重新加载应用，可以看到下图界面。


在上面的代码中，我们创建一个 JSON 对象，非常类似于从 API 调用的对象。我们为一本书的对象创建属性和值。在类文件中，我们使用虚构数据，只为了得到第一个元素，并用它来填充我们的视图。我们使用图像组件来加载图像到视图。需要注意的是，我们在样式表中设定其宽度和高度。如果在样式表中指定图像的尺寸，那么在视图中将看不到图像。

我们为容器指定了 flexDirection 为「row」的样式。这样的话，元素的子代也将继承该风格，默认值是水平布局而不是纵向布局。请注意，我们是如何在组件内包装其他组件的。在上面代码中，主容器中有两个子元素——图像和视图。视图也有自己的子类——两个文本组件。

先布局图像组件，然后再将视图（rightContainer）水平放置在它旁边。我们为 rightContainer 指定的 flex 风格为1。这使得该视图组件占据剩余空间，而不会遮挡图像组件。如果你想看 flex 样式的效果，可以为 rightContainer 添加以下代码。

javascriptbackgroundColor: "red"


重新加载应用，你会看到空间被 rightContainer 样式组件占满。但它不会遮挡到其他组件。之所以没有延伸到整个屏幕，是因为外容器设定了留白，而图片也设置了右边界。



删除 rightContainer 的 flex 设定，再重新加载 App。现在组件只会占据适应其内容的足够空间。



如果将 thumbnail 和 rightContainer 的  flex 样式设置为2，它们将会占据同样的宽度，比例为2:2（或者1:1）。你可以将其设置为任何需要的数值，比例会做出相应的改变。



你可以尝试不同的比例以得到你想要的结果。让我们回到之前为 rightContainer 添加红色背景的那一步，继续下面的步骤。

添加列表视图

React Native 有一个 ListView 组件，显示数据的滚动行——也就是 iOS 中的表视图。

首先，修改解构语句显示我们添加的更多的组件。

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


添加以下代码到样式表中。

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


添加以下构造函数到 BookList 类。

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


最后添加以下函数。

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


在构造函数中，我们创建了一个 ListView.DataSource 对象，并将其分配给 dataSource 属性。DataSource 是一个接口，ListView 用它来确定在更新 UI 过程中哪些行发生了变化。我们提供了一个可以比较两列是否相同的函数，用于确定数据列表是否变化。

当组件被加载到 UI 视图时，会调用 componentDidMount()函数。该函数一旦被调用，我们用数据对象中的数据来设置 datasource 属性。

你可以使用下面的代码来修改 render()函数。

javascriptrender() {
    return (
        
    );
}


将下面的函数添加到 BookList 类。

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


以上代码在 render()函数中创建了一个 ListView 组件。这里的 datasource 属性与之前设定的数值一致。然后调用 renderBook()函数显示 ListView 中的各列数据。

在 renderBook()函数中，我们使用 TouchableHighlight 组件。这是一个包装组件，能让视图正确响应点击行为。一旦点击，该包装组件的透明度就会降低，可以允许底层颜色透过，使得视图变暗或变色。这样的话，如果你点击一个 ListView 行，你会看到高亮色，就像之前设置的选择表格视图单元格时的响应一样。我们在分离器的底部添加一个样式为 separator 的空视图组件。这样的设定下，视图会出现一个灰色的水平线，便于分割每行项目。

重载该应用，你会看到只有一个单元的表格视图。



现在将真实数据加载到应用中。

从文件中移除 FAKE_BOOK_DATA 变量，并添加以下代码。这是加载数据的网址。

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


修改解析声明。

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


添加以下样式设定。

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


用下面的代码修改构造函数。我们为组件的状态对象添加另一个属性，用来判断视图是否成功加载。

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


按下列代码修改 componentDidMount()函数，并添加 fetchData()函数。 fetchData()将调用 Google 图书 API，当它响应操作时，会将获取的数据设置为 DataSource 属性，同时将 isLoading 设置为 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()函数并添加 renderLoadingView()。我们添加一个检查 isLoading，如果它的值为 true，就回到由 renderLoadingView()返回的视图。这个视图显示活动指示灯（一个转盘），以及「正在载入书籍...」的字样。当加载完成后，你应该看到表中的图书清单。

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

       return (
            
        );
}  

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


重新加载应用，你会看到类似下图的界面。



添加详情视图

如果你点击表中的一个单元格，单元格将会突出显示，但不会响应其它操作。我们将添加一个详情视图，以显示选择当前书的详细信息。

在项目中新建文件，并命名为 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;


上述代码的大部分内容，我们之前已经讨论过，这里不再赘述。之前没接触过的是 props 属性，其用途是获取数据。通过设置 props 属性，将数据传递到这个类。在代码中，我们先获得数据，随后用数据填充视图。

需要注意的是，我们设置了容器的上边界。如果不这样的话，视图将从屏幕的最顶部开始，从而导致某些元素被导航栏遮挡。

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

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


修改 BookList 类中 render()函数的 TouchableHighlight。

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


上述代码指定了当某列书籍被点击时响应一个回调函数。粘贴下面的函数到该类。这将 BookDetail 视图推送到导航堆栈中，并设置导航栏上的标题可见。然后将该选中行有关的图书对象传递给 BookDetail 类。

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


重载该 App，你能看到当前选中书籍的详细信息。



搜索

现在已经完成了精选标签的主从视图，我们将继续完善搜索选项卡，使用户能够利用 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;


述代码中，我们在构造函数中设置了一些属性：bookAuthor、bookTitle、isLoading 和 errorMessage。下面简要介绍下如何使用。

在 render()方法中，我们需要检查 isLoading 值是否为 true，如果是则建立一个活动指示器，否则则创建一个空视图（后面会用到）。然后，我们创建一个被用来插入查询的搜索表单。TextInput 用于接收输入。当组件的值改变时（例如用户键入一些文本），将会调用 TextInput 组件，同时为组件指定一个回调函数。在调用时，回调函数 bookTitleInput()和 bookAuthorInput()利用用户输入的数据将设置 bookAuthor 和 bookTitles 属性。当用户按下搜索按钮时，searchBooks()被调用。需要注意的是，React Native 没有按钮组件。所以，我们使用 TouchableHighlight 来代替，并用文本包装，使它的样式看起来像一个按钮。当按下搜索按钮时，根据输入的数据构成一个 URL。用户可以通过书名、作者或书名+作者进行搜索。如果结果成功返回，SearchResult 将被推到导航堆栈，否则提示错误消息。我们还将响应数据传递给 SearchResults 类。

创建一个文件并命名为 SearchResults.js，将下列代码贴进去。

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;


以上代码之前已经讨论过，也不再赘述。代码中获得数据，并将数据通过 props 属性传递到类，同时创建填充了数据的 ListView。

作者注意到，在 API中，当你按作者搜索时，结果不一定是书的数据，而是作者自身的信息。这意味着某些行的 book.volumeInfo.imageLinks.thumbnail 和 book.volumeInfo.description 有未定义的值。所以我们稍作检查，如果没有图像则显示一个空视图。否则，我们的应用将试图加载不存在的图像，这样会容易引发崩溃。

我们使用之前用过的 BookDetail 组件，来显示每本书的详细信息。如图所示，打开 BookDetail.js 并修改 render()函数。在用数据填充视图之前，检查传入的数据是否有相关图像和详细信息。如果尝试载入的书籍没有详情或图片，对应的区域将是空白。你可以向用户提示一个错误信息，在此我们省略该步骤。

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}
        
    );
}


重载应用，会看到搜索书籍的界面。



结束语

尽管仍在不断完善，React Native 看起来很有希望成为构建移动应用的另一种选择。它为 Web 开发人员开启了一扇门，让他们能够在移动开发领域一探究竟。同时为移动开发者提供了一种简化开发流程的新方式。

随着项目的发展，让我们拭目以待 React Native 和应用开发（iOS和Android ——或者别的平台）将会碰撞出什么样的火花。同时，如果你需要进一步确认网络技术是否能用于实现真正的原生体验，你可以看看这些由 React Native 构建的应用：Facebook Ads Manager（完全由 React Native 构建）以及 Facebook Groups（React Native 和 Objective-C 构建的混合应用）。

「学习一次，在任何地方应用」。单这一句足以证明学习 React Native 框架的意义。

你可以在这里下载完整示例项目。

为了更进一步了解 React Native，你可以参考下列视频和资料。

  
React Native 简介
  深入 React Native
  React Native 接力：将现代网页技术推向移动开发世界
  


你可以在这下载 Xcode 项目，仅供参考。（完结）

React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

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

本文系 OneAPM 工程师编译整理。想阅读更多技术文章，请访问 OneAPM 官方博客。


            
                     
                 
                                                                                                                    
                         超融合服务器
                                             
                         专线服务
                                                                                                                                                 
                                      
                     
                    
                                                                                               React Native
                                                                                                           webrtc react native
                                                                                                           react native webrtc
                                                                                                           react-native
                                                         
                 
               
              
             
               
                    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   转载请注明本文地址：https://www.ucloud.cn/yun/15801.html
               
                      
               
                 
                                  上一篇：转载:小心别让圆角成了你列表的帧数杀手  
                                                
                                       下一篇：iOS开发～CocoaPods使用详细说明


              
                相关文章
                
                             
                                                                    
                                                
                          React Native 简介：用 JavaScript 搭建 iOS 应用 (1)
                                                     摘要：利用来搭建代码。虽然这不是安装的唯一方式，但我发现，是非常好用的包管理器。终端窗口打开后，会启动，并由服务器处理以上请求。面对这种情况时，需要关闭终端窗口，停止在上的应用，并重新运行。使用设定应用的用户界面。命名这两个文件为和。

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，...
                                                   
                          
                                
                                    xiaoqibTn
                                    2019-08-21 10:37
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          React Native 简介：用 JavaScript 搭建 iOS 应用 (1)
                                                     摘要：利用来搭建代码。虽然这不是安装的唯一方式，但我发现，是非常好用的包管理器。终端窗口打开后，会启动，并由服务器处理以上请求。面对这种情况时，需要关闭终端窗口，停止在上的应用，并重新运行。使用设定应用的用户界面。命名这两个文件为和。

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，...
                                                   
                          
                                
                                    beanlam
                                    2019-06-25 14:30
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          React Native 简介：用 JavaScript 搭建 iOS 应用(2)
                                                     摘要：分别命名文件为和。上述代码指定了当某列书籍被点击时响应一个回调函数。当组件的值改变时例如用户键入一些文本，将会调用组件，同时为组件指定一个回调函数。在调用时，回调函数和利用用户输入的数据将设置和属性。

【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，作者介绍通过 React N...
                                                   
                          
                                
                                    n7then
                                    2019-08-21 10:37
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                                                       
                                                
                          大前端2018现在上车还还得及么
                                                     摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。

第一阶段：
HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
JavaScript基础：Js基础教程、js内置对...
                                                   
                          
                                
                                    livem
                                    2019-08-05 12:46
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                                       
                                                
                          大前端2018现在上车还还得及么
                                                     摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。

第一阶段：
HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
JavaScript基础：Js基础教程、js内置对...
                                                   
                          
                                
                                    stormgens
                                    2019-08-01 18:25
                                    评论0 
                                    收藏0 
                                
                          
                      
                     
                                                                           
                
              
              
               
                  
                  发表评论
                   
                                      
                      
                        登陆后可评论
                      
                   
               
              
                
                  0条评论


           
               
                
                    
                    tigerZH
                    男|高级讲师
                    
                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    
                          TA的文章
                          阅读更多
                    
                      
                                                  关于AI视觉-如何连接使用智能语音开发套件（USB语音开发套件）
                            阅读 2975·2021-11-24 09:38
                                                       【C语言】超详讲解☀️指针是个什么针？（一次性搞定指针问题）
                            阅读 983·2021-09-23 11:21
                                                       前端那些小众而又精美的网站及工具
                            阅读 2824·2019-08-30 14:14
                                                       canvas动画合集Vue组件
                            阅读 3024·2019-08-30 13:56
                                                       vue transition 过渡动画 从左向右进入，从右向左进入
                            阅读 3643·2019-08-30 11:20
                                                       输入 url 到页面展现的短短几秒内浏览器究竟做了什么？
                            阅读 1748·2019-08-29 17:23
                                                       采用20/80原则学习 CSS Grid 布局
                            阅读 2541·2019-08-29 16:14
                                                       玩儿前端——CSS垂直的那些事儿
                            阅读 1581·2019-08-28 18:18
                                                
                      
                
                
                 

                  云社区相关服务 
                    
                        
                            
                            提问
                        
                        
                            
                            学习
                        
                        
                        
                            
                            认证
                        
                      
                        
                            
                            产品
                        
                        
                        
                            
                            技术服务
                        
                          
                            
                            售前咨询
                        
                       
                
                   
              
  
                  最新活动

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

React Native 简介：用 JavaScript 搭建 iOS 应用(2)

相关文章

React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

React Native 简介：用 JavaScript 搭建 iOS 应用 (1)

React Native 简介：用 JavaScript 搭建 iOS 应用(2)

大前端2018现在上车还还得及么

大前端2018现在上车还还得及么

发表评论

0条评论

tigerZH

男|高级讲师

TA的文章

关于AI视觉-如何连接使用智能语音开发套件（USB语音开发套件）

【C语言】超详讲解☀️指针是个什么针？（一次性搞定指针问题）

前端那些小众而又精美的网站及工具

canvas动画合集Vue组件

vue transition 过渡动画从左向右进入，从右向左进入

输入 url 到页面展现的短短几秒内浏览器究竟做了什么？

采用20/80原则学习 CSS Grid 布局

玩儿前端——CSS垂直的那些事儿

云社区相关服务

最新活动