如何使用React构建一个简单布局组件 如何科学的组织React组件样式

如何使用React构建一个简单布局组件

rn的布局 rn的布局是完全是用flex来实现。使用flex来进行布局是多么让人爽心悦目的一件事，按照设计图来实现一个页面是很容易的事情，写过pc端布局转向写rn的布局的童鞋，这种感觉更有强烈（个人YY的哈）；用flex解决pc端的垂直居中的问题真是

如何科学的组织React组件样式

React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loader style-loaderextract-text-webpack-plugin。
正在使用的方式
我们理想中的文件结构可能会是这样的：
- components
- modal
- modal.jsx
- modal.css // 可以是任意预处理器
- dropdown
- dropdown.jsx
- dropdown.css

然而，js现在可以做模块化，css并不行，所有css的定义都可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其他组件，于是我们可以通过命名约定（name convention）来曲线救国（这一点并不局限于react开发）。
@modal-prefix: modal

.@{modal-prefix} {
}

.@{modal-prefix}-title {
}

类似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽量避免命名冲突的可能。于是在组件中就可以这样做
import React from react
import ./modal.less

export default React.createClass({
render () {
return

Hello

}
})

上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用react开发项目，也会用类似的方式）。
CSS in JS
之前看到过一个ppt：https://speakerdeck.com/vjeux/react-css-in-js，谈到了类似的问题。
一个方向是把样式也直接写进组件里，即使用inline style。首先，直接用传统的inline style并不可取，它对属性的支持有限，比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言，在react中倒是还行：将需要重用的样式对象作为模块导出即可。
其实大家很努力地希望CSS in JS可以实现，比如：
react-style
github地址
它的局限就是上面提到过的属性支持的问题，没有细究这个东西，不太喜欢。
local scoped CSS
https://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope
用这个东西现在是webpack官方支持的，已在css-loader中实现，可以真正让你的css代码作为本地声明，类似的代码：
// style.css
:local(.title) { background: red }

在需要这份样式的组件里引入这个模块：
import styles from style.css

首先css的语法中是不支持这个:local()的，我们先看看页面最终的代码：

Info

到这里应该明白了，其实这也算是个预处理器，它将:local(.title)的类名变成了一个哈希值，仅可以通过模块导入的方式来获取这个哈希值并应用到组件上（生成的类名是可以配置的）。现在css-loader可以通过添加module选项（详细内容可以参考上面CSS Modules的链接）使得css默认定义的是local scoped的，希望共享的可以用:global()定义。
也可以和预处理器混用：
:global {
.global-class-name {
color: green
}
}

目前看下来，它只对class名做哈希，也就是说：
:local(.title span) // .[hash] span

然而
:local(.title .name) // .[hash0] .[hash1]

这个算是一个有意思的方式，首先它依赖于webpack，而webpack并不局限于React的开发，任何前端项目都可以使用webpack，那么就也都可以使用CSS Modules的概念，不知道这个CSS Modules会有怎么样的发展，感觉可以尝试。
这里是一个使用样例：https://github.com/css-modules/webpack-demo
写在最后的话
目前的探索结果暂时是这样，之后可能会继续来填坑。反正现在应该不会去用CSS in JS，CSS Modules可以一试，因为css-loader这个插件基本react的项目里都会使用，写好的组件一个import， 样式和组件都有了，不过仍需实践。

React-Native-Android怎么封装原生组件

提供原生视图很简单：
创建一个ViewManager的子类（或者更常见的，SimpleViewManage的派生类）。
实现createViewInstance方法。
导出视图的属性设置器：使用@ReactProp（或@ReactPropGroup）注解。
把这个视图管理类注册到应用程序包的createViewManagers里。
实现JavaScript模块。
在开始之前，先创建一个工程，命令如下：
React-native init NativeView

第一步. 创建ViewManager的子类MyTextViewManager
第二步.实现方法createViewInstance

第三步. 通过@ReactProp（或@ReactPropGroup）注解来导出属性的设置方法

上面三步中MyTextViewManager的整个代码如下：

public class MyTextViewManager extends SimpleViewManager{ @Override public String getName() { return "MyTextView" } @Override protected TextView createViewInstance(ThemedReactContext reactContext) { TextView textView = new TextView(reactContext) return textView } @ReactProp(name = "text") public void setText(TextView view, String text) { view.setText(text) } @ReactProp(name = "textSize") public void setTextSize(TextView view, float fontSize) { view.setTextSize(fontSize) } @ReactProp(name = "textColor", defaultInt = Color.BLACK) public void setTextColor(TextView view, int textColor) { view.setTextColor(textColor) } @ReactProp(name = "isAlpha", defaultBoolean = false) public void setTextAlpha(TextView view, boolean isAlpha) { if (isAlpha) { view.setAlpha(0.5f) } }} 第四步：注册MyTextViewManager。 创建类MyReactPackage，实现ReactPackage的方法createViewManager，在该方法中注册上面的组件MyTextViewManager。实现ReactPackage时，需要实现这三个方法，学过导入原生模块部分时我们应该很熟悉了。封装的原生模块放在createNativeModules里，封装的原生UI组件放在createViewManagers里。需要注意的是剩下的最后一个方法createJSModules里默认是返回null，要改成返回空集合，否则编译时会报错。 代码如下： public class MyReactPackage implements ReactPackage { @Override public List createNativeModules(ReactApplicationContext reactContext) { return Collections.emptyList() } @Override public List> createJSModules() { return Collections.emptyList() } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Arrays.asList( new MyTextViewManager() ) } } MyReactPackage还需要在MainApplication.java文件的getPackages方法中提供。这个文件位于你的react-native应用文件夹的android目录中。具体路径是: android/app/src/main/java/com/your-app-name/MainApplication.java. @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new MyReactPackage() ) } 第五步：实现对应的JS模块。 最后一步就是创建JavaScript模块并且定义Java和JavaScript之间的接口层。大部分过程都由React底层的Java和JavaScript代码来完成，你所需要做的就是通过propTypes来描述属性的类型。 新建一个MyTextView.js文件。代码如下： import { PropTypes } from react import {requireNativeComponent,View} fromreact-native var myTextView ={ name:MyTextView, propTypes:{ text:PropTypes.string, textSize:PropTypes.number, textColor:PropTypes.number, isAlpha:PropTypes.bool, ...View.propTypes // 包含默认的View的属性 } } module.exports =requireNativeComponent(MyTextView,myTextView) 最后：然后你就可以在js代码中引用刚才的组件了，

webstorm的reactnative怎么创建新的文件

jsx语法设置
在没有进行设置的情况下，每次打开WebStorm的时候打开包含jsx语法的.js文件都会有以下提示：

当然我们点击转换后就可以了，但是每次都会提示，所以还是来一个一劳永逸的方法把它给去掉吧：

然后Apply/OK即可。
设置.js文件中支持react-native语法高亮
首先会发现在js文件中有不少的警告，类似这样：

这个警告的原因是因为编辑器不知道所引用的这些东西是在哪（不知道源在哪），所以需要告诉编辑器所写的东西是在哪个源里面：

在下图的download manager里面找到react和react-native下载安装，然后返回到上图的窗口，按照上图第五部分勾选刚才下载的两个library即可。

到此，错误信息就没有了，我们可以安心的写代码了：

npm基本配置
你们我们想直接在IDE中直接运行项目，就像Android或者ios可以直接点击图形化界面运行，可以吗？这就需要设置一下npm。

或者我们直接项目上右键打开项目的设置环境

选择我们要运行的设备

说明：
Name为该按钮的名字
Program为react Native的路径,终端命令:which react-native 一般都是 /usr/local/bin/react-native
Parameters填 run-ios
working directory该输入框中,先点击右边的insert macro,选择ProjectFileDir.

然后我们发现项目右上角多了一个可以run的图标（其实是之前我们配置的npm命令）