本教程希望让您快速熟悉使用React Native来编写iOS和Android App的技巧。如果你希望知道React Native是什么以及为什么Facebook打造了它，可以读读
我们这里假设你已经有了使用React编写Web应用程序的经验。如果还没有，建议你可以先从开始学习。
React Native需要一些基础的配置工作，你可以参考来进行。
在所有依赖的软件都已经安装完毕后，只需要输入两条命令就可以创建一个React Native工程。
npm install -g react-native-cli
react-native-cli是一个终端命令，它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native的命令。这个安装过程你只需要进行一次。
react-native init AwesomeProject
这个命令会初始化一个工程、下载React Native的所有源代码和依赖包，最后在AwesomePrjoect/iOS/AwesomeProject.xcodeproj和AwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程。
译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请先将npm仓库源替换为国内镜像：
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。本站论坛区提供了。完整打包全部iOS和Android的第三方依赖，只要环境配置正确，无需科学上网漫长等待，解压即可直接运行。
想开发iOS版本，你现在可以在XCode中打开刚刚创建的工程(AwesomePrjoect/iOS/AwesomeProject.xcodeproj)，然后只要按下?+R就可以构建并运行。这个操作会同时打开一个用于实现动态代码加载的Node服务（React Packager）。所以每当你修改代码，你只需要在模拟器中按下?+R，而无需重新在XCode中编译。
想开发Android版本，先连接你的设备或启动模拟器，然后在AwesomeProject目录下运行react-native run-android，就会构建工程并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。当你修改代码之后，你需要打开摇一摇菜单(摇一下设备，或者按下设备的Menu键，或者在模拟器上按下F2或Page Up，Genymotion按下?+M)，然后在菜单中点击“Reload JS”。
在本向导中我们会创建一个简单的Movies应用，它可以获取25个上映中的电影，然后把他们在一个ListView中显示。
Hello World
react-native init命令会创建一个指定名字的应用，我们刚才输入的命令就创建了一个名为AwesomePrjoect的应用。这是一个简单的Hello World应用。对于iOS版本，你可以编辑index.ios.js来做一些改动，然后在模拟器中按?+R来看到修改的结果。对Android版本，你可以编辑index.android.js来做一些改动，然后在摇一摇菜单中点击“Reload JS”来看到修改的结果。
译注：本文的示例代码改用了ES6语法，可能和其他文档写法不一致。但React Native从0.18之后，新建项目默认已经采用了ES6语法，故我们推荐不熟悉ES6与ES5区别的朋友先读读，另外还可以看看。
在我们真正从Rotten Tomatoes(译注：一个国外的电影社区)抓取数据之前，我们先制造一些模拟数据来练一练手。在Facebook我们通常在JS文件的开头，紧跟着import语句之后声明一个常量，不过这不重要，你可以把它放在index.ios.js和index.android.js的任意位置：
var MOCKED_MOVIES_DATA = [
{title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
展现一个电影
我们接下来要展现一个电影，绘制它的标题、年份、以及缩略图(译注：这个过程我们通常会叫做“渲染/render”，后面我们都会用“渲染”这个词)。渲染缩略图需要用到Image组件，所以把Image添加到对React的import列表中。
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
然后修改一下render函数，这样我们可以把上面创建的模拟数据渲染出来。
render() {
var movie = MOCKED_MOVIES_DATA[0];
style={styles.container}&
&{movie.title}&
&{movie.year}&
source={{uri: movie.posters.thumbnail}} /&
按下?+R或者Reload JS，现在你应该能看到文字&Title&和&2015&，但现在Image组件没渲染任何东西，这是因为我们还没有为图片指定我们想要渲染的宽和高。这通过样式来实现。当我们修改样式的时候，我们也应该清理掉我们不再使用的样式。
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
thumbnail: {
width: 53,
height: 81,
然后把它应用到Image组件上：
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
按下?+R或者Reload JS，现在图片应该可以被渲染出来了。
现在我们已经成功的把我们的数据渲染出来了，下面让我们把它弄的更好看一些。我想把文字放在图片的右边，然后把标题弄的大一些，并且水平居中：
+---------------------------------+
|+-------++----------------------+|
|+-------++----------------------+|
+---------------------------------+
所以我们需要增加一个container来实现一个水平布局内嵌套一个垂直布局。
style={styles.container}&
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
style={styles.rightContainer}&
style={styles.title}&{movie.title}&
style={styles.year}&{movie.year}&
和之前相比并没有太多变化，我们增加了一个container来包装文字，然后把它移到了Image的后面（因为他们最终在图片的右边）。然后我们来看看样式要怎么改：
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
我们用Flexbox来布局。如果你想了解更多，可以读读。
在上面的代码片段中，我们用了一句flexDirection: 'row'来让我们的主容器的成员从左到右横向布局，而非默认的从上到下纵向布局。
现在我们往style对象里增加另一个样式：
rightContainer: {
这句话的作用是让rightContainer在父容器中占据Image之外剩下的全部空间。如果你还不是很理解的话，你可以往rightContainer里增加一个backgroundColor看一看，然后再去掉flex:1对比一下。你会发现去掉这一句后，容器会变成能容纳它孩子的最小大小。
给文字添加样式就简单的多了：
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
textAlign: 'center',
再按一次?+R或者Reload JS来看看最新的结果。
拉取真正的数据
从Rotten Tomatoes的API拉取数据和学习React Native并没有什么直接关系，所以你也可以直接跳过本节。
把下面的常量放到文件的最开头（通常在require下面）来创建我们请求数据所需的地址常量REQUEST_URL
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
首先在应用中创建一个初始的null状态，这样可以通过this.state.movies == null来判断我们的数据是不是已经被抓取到了。我们在服务器响应返回的时候执行this.setState({movies: moviesData})来改变这个状态。把下面这段代码放到我们的React类的render函数之前：
constructor(props) {
super(props);
this.state = {
movies: null,
组件加载完毕之后，就可以向服务器请求数据。componentDidMount是React组件的一个生命周期方法，它会在组件刚加载完成的时候调用一次，以后不再会被调用。React中的各种生命周期方法请。
componentDidMount() {
this.fetchData();
现在我们来为组件添加fetchData函数。你所需要做的就是在Promise调用链结束后执行this.setState({movies:data})。在React的工作机制下，setState实际上会触发一次重新渲染的流程，此时render函数被触发，发现this.state.movies不再是null。注意我们在Promise调用链的最后调用了done() —— 这样可以抛出异常而不是简单忽略。
fetchData() {
fetch(REQUEST_URL)
.then((response) =& response.json())
.then((responseData) =& {
this.setState({
movies: responseData.movies,
现在我们来修改render函数。在电影数据加载完毕之前，先渲染一个“加载中”的视图；而如果电影数据已经加载完毕了，则渲染第一个电影数据。
render() {
if (!this.state.movies) {
return this.renderLoadingView();
var movie = this.state.movies[0];
return this.renderMovie(movie);
renderLoadingView() {
style={styles.container}&
正在加载电影数据……
renderMovie(movie) {
style={styles.container}&
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
style={styles.rightContainer}&
style={styles.title}&{movie.title}&
style={styles.year}&{movie.year}&
现在再按一次?+R或者Reload JS，你会首先看到“正在加载电影数据……”，然后在响应数据到达之后，看到第一个电影的信息。
现在我们来让我们的应用能够渲染所有的数据而不是仅仅第一部电影。我们要用到的就是ListView组件。
为什么建议把内容放到ListView里？比起直接渲染出所有的元素，或是放到一个ScrollView里有什么优势？这是因为尽管React很高效，渲染一个可能很大的元素列表还是会很慢。ListView会安排视图的渲染，只显示当前在屏幕上的那些元素。而那些已经渲染好了但移动到了屏幕之外的元素，则会从原生视图结构中移除（以提高性能）。
首先要做的事情：在文件最开头，从React中引入ListView。
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
现在来修改render函数。当我们已经有了数据之后，渲染一个包含多个电影信息的ListView，而不仅仅是单个的电影。
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
dataSource接口用来在ListView的整个更新过程中判断哪些数据行发生了变化。
你会注意到我们现在用到了this.state中的dataSource。下一步就是在constructor生成的初始状态中添加一个空白的dataSource。另外，我们现在要把数据存储在dataSource中了，所以不再另外用this.state.movies来保存数据。我们可以在state里用一个布尔型的属性(this.state.loaded)来判断数据加载是否已经完成了。
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) =& row1 !== row2,
loaded: false,
同时我们也要修改fetchData方法来把数据更新到dataSource里：
fetchData() {
fetch(REQUEST_URL)
.then((response) =& response.json())
.then((responseData) =& {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
最后，我们再在styles对象里给ListView添加一些样式。
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
现在可以体现最终的结果了：
为了实现一个完整功能的应用，接下来其实还有一些工作要做，譬如：添加导航器，搜索，加载更多，等等等等。可以在中看看我们做了什么。
最终的代码
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) =& row1 !== row2,
loaded: false,
componentDidMount() {
this.fetchData();
fetchData() {
fetch(REQUEST_URL)
.then((response) =& response.json())
.then((responseData) =& {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
renderLoadingView() {
&View style={styles.container}&
Loading movies...
renderMovie(movie) {
&View style={styles.container}&
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
&View style={styles.rightContainer}&
&Text style={styles.title}&{movie.title}&/Text&
&Text style={styles.year}&{movie.year}&/Text&
var styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
rightContainer: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
textAlign: 'center',
thumbnail: {
width: 53,
height: 81,
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
快速入门使用指南使用指南(iOS)使用指南(Android)组件API接口兼容(POLYFILLS)React Native中文网.(C) 2017 杭州欧石南网络科技有限公司浙ICP备号-3浙公网安备 11号关于actionbar&,&toolbar&上右侧点点点的配置总结
1.增加oncreateMenu()
public boolean onCreateOptionsMenu(Menu menu){
&&&&&&&&&&&&
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.main_menu, menu);
mMenuItem = menu.findItem(R.id.menu_name);
mMenuItem.setTitle(getResources().getString(R.string.app));
return super.onCreateOptionsMenu(menu);
2.最新版的其实support包提供的ActionBarActivity，让自己的baseActivity继承于ActionBarActivity
对于那三个点菜单的话，标准叫法叫做：action overflow button
但是是只在Android
3.0 (API level 11)&+才会出现的
低版本的（Android
2.3.x (API level 10) or lower）对应的叫做：overflow
menu，效果（不是三个点）而是More那个按钮
不论是三个点还是More按钮，作用都很明显，都表示点击后可以看到更多的按钮菜单
这些更多的菜单，都是由于之前低版本的6个Menu界面放不下了，或者是新版本的actionBar中没位置显示了，才放到这个overflow
menu/button中的。
而是否放到overflow中，是通过对应的android:showAsAction参数来决定的。
android:showAsAction="ifRoom"
说的就是：
如果actionbar中放不下，就放到overflow中去。
如果想百分之百让他在overflow中去，就把item都配置成：&&&android:showAsAction="collapseActionView"
可参看：http://www.tuicool.com/articles/7BJBZb
http://www.crifan.com/continue_try_add_android_actionbar_three_dot_option_menu/
http://blog.csdn.net/xiaoyaovsxin/article/details/
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。查看: 6687|回复: 7
toolbar右边怎么添加新的功能按钮？
签到天数: 13 天连续签到: 1 天[LV.3]偶尔看看II主题帖子e币
toolbar右边怎么添加新的功能按钮？
我创建的右面只有三个点的菜单按钮，怎么才能再添加几个按钮？
app:showAsAction
该用户从未签到主题帖子e币
app:showAsAction
签到天数: 213 天连续签到: 1 天[LV.7]常住居民III主题帖子e币
为什么不自己自定义一个呢？
签到天数: 98 天连续签到: 3 天[LV.6]常住居民II主题帖子e币
顶顶顶顶顶顶顶顶顶顶顶顶顶
签到天数: 98 天连续签到: 3 天[LV.6]常住居民II主题帖子e币
顶顶顶顶顶顶顶顶顶
签到天数: 98 天连续签到: 3 天[LV.6]常住居民II主题帖子e币
此话从何说起？此话从何说起？
签到天数: 98 天连续签到: 3 天[LV.6]常住居民II主题帖子e币
顶顶顶顶顶顶顶顶顶顶顶顶顶
签到天数: 98 天连续签到: 3 天[LV.6]常住居民II主题帖子e币
顶顶顶顶顶顶顶顶顶顶的顶顶顶顶顶的顶顶顶顶顶顶顶顶顶顶
社区认证会员
社区认证会员
QQ已认证，此人靠谱
推荐阅读热门话题
61887420384328285284261252226226213205201192715
1&小时前1&小时前1&小时前2&小时前2&小时前2&小时前7&小时前昨天&23:58昨天&17:00昨天&16:19昨天&09:54昨天&00:06前天&23:53前天&16:50前天&16:11前天&13:55
Powered by3被浏览889分享邀请回答0添加评论分享收藏感谢收起写回答您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
ExtJs入门(适合新手)说课.ppt 50页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
你可能关注的文档：
··········
··········
Ext.FormPanel EXT核心组件应用 Ext.tree.TreePanel Ext.Window toolBar and Menus Ext界面中的布局 Ext.grid.GridPanel Record 、 Store 、 DataProxy、DataReader 辅助函数 组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。
组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。
一个简单的FormPanel效果图
var simple = new Ext.FormPanel({
labelWidth: 75, frame:true,
url:'saveForm.do',
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0', width: 350,
defaults: {width: 230},defaultType: 'textfield',
{fieldLabel: 'First Name',name: 'first',allowBlank:false},
{fieldLabel: 'Company',name: 'company'},
{fieldLabel: 'Email',name: 'email',vtype:'email'},
new Ext.form.TimeField({
fieldLabel: 'Time',name: 'time',
minValue: '8:00am',maxValue: '6:00pm'})
buttons: [{text: 'Save'},{text: 'Cancel'}] });
一个简单的FormPanel代码 Ext.FormPanel中的数据控件
Ext.form.Checkbox, Ext.form.CheckboxGroup Ext.form.ComboBox Ext.form.DateField Ext.form.HtmlEditor Ext.form.NumberField Ext.form.Radio, Ext.form.RadioGroup Ext.form.TextArea Ext.form.TextField Ext.form.TimeField Ext.form.VTypes
toolBar是用来存放功能按钮的容器 toolBar中可以放置所有的FormPanel中的控件 toolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中 示例效果图
toolBar and Menus Ext.tree.TreePanel Tree是用来显示树形数据的，效果图如下
Ext.tree.TreePanel 代码实现—定义根节点：
Var root = new Ext.tree.AsyncTreeNode({
text : '未分配权限',
expanded: true
Ext.tree.TreePanel 代码实现—定义树的数据源
Var store = new Ext.tree.TreeLoader({
dataUrl : ‘loadTreeNode.do’
Ext.tree.TreePanel 代码实现—定义树 var tree = new Ext.tree.TreePanel({
rootVisible : true,
autoScroll:true,
loader : store,
enableDD:true,
containerScroll: true,
dropConfig: {appendOnly:true},
root : root });
var tree = new Ext.tree.TreePane
正在加载中，请稍后...