react-native
隔壁小猿
这个作者很懒,什么都没留下…
展开
-
Reac native (1) 环境搭建
react native 环境搭建,以及常见的一些问题解决办法原创 2017-04-10 11:14:58 · 596 阅读 · 0 评论 -
React native (3) 导入和导出
1.组件的导入和导出因为自定义组件有三种方式,所以导出方式也有三种 注意修改新建文件的类名,然后在类名前添加export default ,将他导出 在其他组件中引用,先导入你的自定义组件,然后与Android的view类似 导入:import HelloComponent from './HelloComponent'使用: render() { return ( <Vi原创 2017-04-10 11:34:06 · 1444 阅读 · 0 评论 -
React native (4)--props、state、style、布局
1.属性:props render() { return( <Text>Hello {this.props.name}</Text> ); } 使用 <View style={{flex:1 ,flexDirection:'column'}}> <Greeting name="sinstar"/原创 2017-04-10 11:34:55 · 627 阅读 · 0 评论 -
React native (5) 处理文本输入
在上面的例子里,我们把text保存到state中,因为它会随着时间变化。 文本输入方面还有很多其他的东西要处理。比如你可能想要在用户输入的时候进行验证,在React的表单组件中的受限组件一节中有一些详细的示例(注意react中的onChange对应的是rn中的onChangeText)。此外你还需要看看TextInput的文档。 constructor(props){原创 2017-04-10 11:35:47 · 1115 阅读 · 0 评论 -
React native (6) scrollview listview
1.scrollview 很简单,跟Android的一样,堆内容就是了 return( <ScrollView> <Text style={{fontSize:96}}>Scroll me plz</Text> <Text style={{fontSize:96}}>If you like</Te原创 2017-04-10 11:36:34 · 517 阅读 · 0 评论 -
react native杂记
给Image webview 加载本地资源的时候,是需要加上require字段,然后里面再跟地址 <WebView source={require('./index.html')} style={{marginTop: 20}} onError={this._showError.bind(this)} startInLoadingState={true}/> <原创 2017-04-10 11:37:20 · 628 阅读 · 1 评论 -
React Native (2)生命周期 详解
就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化; 第二阶段:是组件在运原创 2017-04-10 11:32:56 · 727 阅读 · 0 评论