文档章节

react-native Q&A笔记

obaniu
 obaniu
发布于 2016/10/19 15:18
字数 384
阅读 240
收藏 0

1,安装

  1. 安装node.js:https://nodejs.org/download/
  2. 安装命令行工具:npm install -g react-native-cli,
  3. 创建一个空项目:重启nodejs command,react-native init HelloWorld
  4. react-native run-android
  5. 环境 vsc安装插件ext install vscode-react-native https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
  6. adb reverse tcp:8081 tcp:8081
  7. 查看logcat :adb logcat *:S ReactNative:V ReactNativeJs:V
  8. react-native start 启动react-native服务

2,基本的东西

  1. 代码模块

Require:引入模块

React.createClass创建组件类

Render方法渲染试图

JSX & XML DOM

AppRegistry注册应用入口

 

  1. css相关

StyleSheet.create创建样式

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

}

});

  1. Image resizeMode

contain模式自适应宽高,给出高度值即可

cover铺满容器,但是会做截取。默认

stretch铺满容器,拉伸

 

  1. Flex布局相关

flex:比例1+2+3

flexDirection: row or column

alignItems:水平居中

justifyContent: 垂直居中

  1. 组件生命周期(图片来自互联网)

getDefaultProps

getInitialState

componentWillMount

Render

componentDidMoun

componentWillUnmount

 

3,RN内部怎么引用控件

this.mView={};

<View ref={ ref=>{this.mView=ref;} }

4,发送命令给原生view

NativeModules.UIManager.dispatchViewManagerCommand( reactTag, commandId, arrary);

reactTag:对应原生view,android就是viewid。可通 ReactNative.findNodeHandle(this.refs.recycle)获取

commandId:命令id

arrary:json数组

 

5,StaticRenderer

render: function(): ReactElement<any> {

return this.props.render();

},

不是一个视图类其在render是还是调用子节点来render

 

6,更新RN到某个版本

npm install --save react-native@0.31.10

创建到某个版本react-native init HelloWorld2 --source react-native@0.31.0

7,判断是否在开发环境

__DEV__

8,判断平台

Platform.OS === 'android'

9, component强制刷新

this.forceUpdate();

10,js里引用变量

{`${this.state.rowId}`}

© 著作权归作者所有

obaniu
粉丝 37
博文 83
码字总数 39241
作品 0
广州
高级程序员
私信 提问
React Native Meetup @Strikingly

REACT NATIVE MEETUP @STRIKINGLY 本次活动是在Strikingly举办。Strikingly使用React-native开发了新iOS/Android应用。 The event is hosted by Strikingly. They have built their new iOS......

han4wluc
2016/12/06
75
0
React Native Meetup @Strikingly

REACT NATIVE MEETUP @STRIKINGLY 本次活动是在Strikingly举办。Strikingly使用React-native开发了新iOS/Android应用。 The event is hosted by Strikingly. They have built their new iOS......

han4wluc
2016/12/06
2
0
React Native第2天——底层原理了解

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/03/28
2.3K
0
React-Native学习资料

我(web+android开发经验)学习React Native过程中接触的知识点和学习的线路图。 React Native第1天——环境配置及知识体系(http://my.oschina.net/addcn/blog/647290) 掌握环境配置及运行h...

addcn
2016/04/06
275
0
ReactNative从零开始笔记6-导航页面传值(正传和逆传)

一、使用环境 Mac 电脑 系统10.14.2 Xcode9.4 react-native-cli版本 2.0.1 react-native: 0.57.3 webstorm 二、导航使用 虽然系统有Navigator可以用,但是0.44版本后就不在推荐使用,而是让我...

摸着石头过河_崖边树
2018/12/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Vue学习01

我的github地址https://github.com/zhangl-w/VueDemo/tree/master/VueDemo 一、基本代码 1.导入Vue包,导包后浏览器内存中会产生一个Vue的构造函数 2.创建一个Vue实例 3.el 表示,当前我们n...

zhang_l
30分钟前
5
0
centos7.x 安装harbor 1.9.3

首先必须安装docker和docker-compose 推荐使用pip安装docker-compose,因为pip可以为你自动对应版本问题 1.docker安装 curl -sfL https://get.docker.io | sh -systemctl start docker 2.d...

Elson
31分钟前
5
0
每天积累一点:射频阻抗

对我来说,阻抗是一个非常令人困惑的概念(术语)。以下是我第一次学习阻抗概念时脑海中出现的许多问题。同样的问题也让你烦恼吗? 当我第一次在高中物理中学习“电阻(Resistance )”时,它...

demyar
32分钟前
5
0
人生苦短?试试Groovy进行单元测试

如果您今天正在编程,那么您很可能听说过单元测试或测试驱动的开发过程。我还没有遇到一个既没有听说过又没有听说过单元测试并不重要的程序员。在随意的讨论中,大多数程序员似乎认为单元测试...

八音弦
33分钟前
4
0
GMAT词汇怎么背?简单记忆法让你不再害怕背单词

GMAT考试对于词汇的掌握和使用要求高,可以说是GMAT考试的难关之一。面对学术化专业化难度颇高的词汇,考生难免会产生畏惧退缩的情绪。GMAT难词怎么背?有没有轻松背单词的方法呢?下面小编就为...

bole6
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部