如何用 React Native 创建一个iOS APP？（二）
|
我们书接上文《如何用 React Native 创建一个iOS APP？》，继续来讲如何用 React Native 创建一个iOS APP。接下来，我们会涉及到很多控件。 1 AppRegistry.registerComponent( 上述是定义应用程序的入口点。这也是 JavaScript 代码开始执行的地方。 添加一个标签栏该应用程序会有一个有两项的标签栏--- Featured 和 Search。我们将首先添加它。 'use strict';
var React = require('react-native');
var {
StyleSheet,View,Text,Component
} = React;
var styles = StyleSheet.create({
description: {
fontSize: 20,backgroundColor: 'white'
},container: {
flex: 1,justifyContent: 'center',alignItems: 'center'
}
});
class Featured extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Featured Tab
</Text>
</View>
);
}
}
module.exports = Featured;
你应该熟悉以上那个代码；它非常类似于我们之前看到的代码。我们设置 Strict Mode，加载 react-native 模块，创建视图样式，渲染UI 和渲染输出()函数功能。最后一行代码输出 Featured 类从而使他更方便地被其他文件所用。请注意我们所说的 class 和 function有点不同于 index.ios.js。JavaScript 有不同的方式表示 class和 function。可以随意选择你喜欢的你风格。接下来的教材中，我们将使用上边所使用的风格。 'use strict';
var React = require('react-native');
var {
StyleSheet,alignItems: 'center'
}
});
class Search extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search Tab
</Text>
</View>
);
}
}
module.exports = Search;
上述程序除了文本组件中的文本都类似于 Featured.js 代码。 'use strict';
var React = require('react-native');
var Featured = require('./Featured');
var Search = require('./Search');
var {
AppRegistry,TabBarIOS,Component
} = React;
class BookSearch extends Component {
constructor(props) {
super(props);
this.state = {
selectedTab: 'featured'
};
}
render() {
return (
<TabBarIOS selectedTab={this.state.selectedTab}>
<TabBarIOS.Item
selected={this.state.selectedTab === 'featured'}
icon={{uri:'featured'}}
onPress={() => {
this.setState({
selectedTab: 'featured'
});
}}>
<Featured/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 'search'}
icon={{uri:'search'}}
onPress={() => {
this.setState({
selectedTab: 'search'
});
}}>
<Search/>
</TabBarIOS.Item>
</TabBarIOS>
);
}
}
AppRegistry.registerComponent('BookSearch',() => BookSearch);
这时我们需要从我们创建的文件中导出两个模块，并将他们分配给变量。在 class 内部，我们指定一个构造函数来为 class 设置一个状态。这时我们要用组件的状态函数。创建一个名为 selectedTab 的属性，并将其值设置为 featured。我们将使用 featured 来确定哪个选项卡应该是主动的。然后设置默认选项卡。 在渲染()函数中我们使用 TabBarIOS 组件创建一个标签栏。记得添加组件使用解构作业否则使用完全限定名称，例如：React.TabBarIOS。 我们创建两个标签栏项目。我们为每个项目设立选中状态并定义一个函数，当这个项目被选中时就会被命名。在 Featured 选项卡中，选择设置为 true，如果 selectTab 状态我们前边定义的值为 feature，组件 selectedTab 是否等同于「搜索」。无论哪个选项卡被设置为 true 都将是活动选项卡。我们为标签栏项目使用系统图标。 添加 Navigation Bar接下来，我们将向应用程序添加一个导航栏，给这个项目添加两个以上的文件。他们将是根视图导航堆栈的标签。为 BookList.js 和SearchBooks.js 文件命名。 'use strict';
var React = require('react-native');
var {
StyleSheet,Component
} = React;
var styles = StyleSheet.create({
});
class BookList extends Component {
render() {
return (
<View>
</View>
);
}
}
module.exports = BookList;
在 SearchBooks.js 应用程序中添加以下代码。 'use strict';
var React = require('react-native');
var {
StyleSheet,Component
} = React;
var styles = StyleSheet.create({
});
class SearchBooks extends Component {
render() {
return (
<View>
</View>
);
}
}
module.exports = SearchBooks;
在两个文件中，我们已经创建了一个带有空白视图的模块然后输出模块。 修改 Featured.js 如图： '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 (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Featured Books',component: BookList
}}/>
);
}
}
module.exports = Featured;
下一个 Search,js 修改如下所示: 'use strict';
var React = require('react-native');
var SearchBooks = require('./SearchBooks');
var {
StyleSheet,Component
} = React;
var styles = StyleSheet.create({
container: {
flex: 1
}
});
class Search extends Component {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={{
title: 'Search Books',component: SearchBooks
}}/>
);
}
}
module.exports = Search;
就像在 Featured.js，上面创建了一个导航控制器，设置其最初的路线并为它设置标题。 重新加载应用程序，你会看到如下所示：
获取和显示数据现在我们要读取数据了。首先我们要构建有假数据的视图，然后使用来自 API 的真数据。 var 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'}}}
];
修改解构任务直到显示包含多个组件时我们才能使用。 var {
Image,StyleSheet,Component,} = React;
添加以下模版： var styles = StyleSheet.create({
container: {
flex: 1,flexDirection: 'row',alignItems: 'center',backgroundColor: '#F5FCFF',padding: 10
},thumbnail: {
width: 53,height: 81,marginRight: 10
},rightContainer: {
flex: 1
},title: {
fontSize: 20,marginBottom: 8
},author: {
color: '#656565'
}
});
然后修改如图所示的 class： class BookList extends Component {
render() {
var book = FAKE_BOOK_DATA[0];
return (
<View style={styles.container}>
<Image source={{uri: book.volumeInfo.imageLinks.thumbnail}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{book.volumeInfo.title}</Text>
<Text style={styles.author}>{book.volumeInfo.authors}</Text>
</View>
</View>
);
}
}
重新加载应用程序就会有如下显示：
在以上代码中，我们创建了一个类似于从 API 中调用的目标 JSON，我们通过这个目标为单独的一本书创建了属性和价值。在 class 文件中，我们使用假数据只为了得到第一个元素来填充我们的观点。我们使用图像组件把图像加载成视图。需要注意的是，我们要在样式表中设置它的宽度和高度。如果你不指定图像在样式表中的尺寸，它就不会出现在视图中。 backgroundColor: 'red' 重新加载应用程序，你就会看到 rightContainer 样式的组件占用的空间。它占据整个空间而不被其他兄弟姐妹所占有。它并不拉伸屏幕，因为外容器有一些填充并且图像有边缘设置权利。
从 rightContainer 删除 flex：1，重新加载应用程序。现在组件只占用足够的可以适应其内容的空间。
如果你为 flex:2 的缩略图和 rightContainer 设置一种风格，他们可能占据相同数量的空间，而且他们会有一个 2:2（或1:1）的宽度比。你可以指定任何值，所有可能的比例都会考虑在内。
你也可以尝试不同的比率得到你喜欢的样式。对于本教程，我们将从为rightContainer 添加一个红色的背景这一步继续深入。 未完待续OneAPM Mobile Insight 以真实用户体验为度量标准进行 Crash 分析，监控网络请求及网络错误，提升用户留存。访问 OneAPM 官方网站感受更多应用性能优化体验，想阅读更多技术文章，请访问 OneAPM 官方技术博客。 本文转自 OneAPM 官方博客 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |