React Native学习笔记----1

React Native是一款用来开发真正原生,可渲染iOS和Android移动应用的JavaScript的框架。使用Javscript和XML进行开发,在后台通过“桥接”方式调用由Objective-C(iOS平台)或java(Android平台)开放的原生渲染接口。
1. 模块的导入
使用require导入了React,如果使用组件,也要逐一的进行导入

var React=require('react-native');
var {
      Text,
      View,
      StyleSheet,
      AppRegistry,
      }=React;

2.渲染

render:function(){
    return (
      <View style={styles.container}>
          <Text style={styles.welcome}>
           Welcome to React Native!
           Text>
     View>
  );
}

3.样式

var styles=StyleSheet.create({
   container:{
       flex:1,
       justifyContent:'center',
       alignItems:'center',
       backgroundColor:'#F5FCFF',
       },
   welcome:{
       fontSize:20,
       textAlign:'center',
       margin:10,
       },
   });

4.组件
开发Web应用时,会使用各种HTML元素,例如div ,span,imgdeng ,但是在React Native中,不用HTML元素,使用类似的组件。
HTML \ React Native
div \ View
img \ Image
p \ Text
ul\ListView, child items
(1)文本组件
所有的文本需要用组件包装起来

<View>
   <Text> This is OK!Text>
 View>

(2) 图片组件

source={require('image!puppies')} />

5.导入图片作为背景

<Image source={require('image!flowers')}
   resizeMode='cover'
   style={styles.backdrop}>
   //这里放置内容
Image>

6.从Web获取数据

fetch('http://www.somesite.com')
   .then((response)=>response.text())
   .then((responseText)=>{
   console.log(responseText);
})

未完。

你可能感兴趣的:(React,Native)