react-native

import React,{Component} from 'react'
import {StyleSheet,Text,View,TouchableOpacity,TextInput} from 'react-native'

export default class LessonInput extends Component{
    //构造器
    constructor(){
        super(props);
        this.state={texts:'1111'}
    }
    render({
        <View style={styles.container}>
             <TextInput  
                  style={[styles.inputs,styles.font]} 
                   placeholder='输入数据'
                   onChangeText={(texts)=this.setState({texts})}
               />    
             <TouchableOpacity style={[styles.touchable,styles.font]}>
                            <Text>搜索</Text>
            </touchableOpacity>
        </View>
    })
}
const styles=StyleSheet.create({
        container: {flex:1},
        inputs:{borderWidth:1,borderColor:'gray',height:45,lineHeight:45,width:100},
        touchable:{width:50,height:47,backgroundColor:'cyan'},
        font:{fontSize:15,color:'#fff'}
})

图片的引入按比例缩放，或者图片原尺寸大小
import react,{Component} from 'react'
import {StyleSheet,Text,View,Image,ImageBackground} from 'react-native'

export default class LessImage extends Component{
        render({
                <View>
                        //网络图片
                    <Image  source={ {uri:''"}} style={style.images}  />
                        //本地图片
                    <Image source={require('./img/1.jpg')} style={styles.mages} />
                    //背景图
                   < ImageBackground  source={{uri:''}} style={style.images}>
                            <Text>文字内容</Text>
                    </ImageBackground>
                </View>
        })

}

scrollView

import Rect,{component} from 'react'import {StyleSheet,ScrollView,RefreshControl,View,Text} from 'react-native'export default class MyScrolll extends Component{    render(){        return(            <ScrollView style={styles.container}                         refreshcontrol={<RefreshCintrol   refreshing={false}                                                                     progressBackgroundColor='red'/>}>                    <View style={styles.view_1}></View>                    <View style={styles.view_2}></View>                                        <View style={styles.view_3}></View>            </ScrollView>        )        }}const styles=StyleSheet.create({    container{flex:1},    scroll{marginTop:20,backgroundColor:'blue'},    view_1{height:300},    view_2{height:400},    view_3{height:500}})module.export=MyScroll
电影列表

import React,{Component} from 'react'
import {Text,View,StyleSheet,ScrollView,RefreshControl} from 'react-native'
//引入数据
var movieDate=require('./movies.json');
var movies=movieData.movies;
export default class MovieList extends Component{
    render(){
        return(
                <View>
                        <ScrollView>

                        </ScrollView>
                </View>
        )    
}
}

路由NavigatorIOS
1)安装插件 yarn add react-navigator/npm install react-navigator –save
2)引入插件 import {createStackNavigator} from ‘react-navigator’

import React,{Component} from 'react'
import {View,Text} from 'react-native'
import {createStackNavigator} from 'react-navigator'
class Home extends Comonent{
    render(){
        return(
                <View>
                    <TouchableOpacity  onPress={()=>this.props.navigation.navigate('List')}>
                        <Text>点击调转到列表页</Text>
                    </TouchableOpacity>
                </View>
        )
    }
}
class ListPage  extends Comonent{
    render(){
        return(
                <View>
                    <TouchableOpacity onPress={()=>this.props.navigation.navigate('Home')}>
                        <Text>点击调转到首页</Text>
                    </TouchableOpacity>
                </View>
               )
                }

}
//样式
//路由
const MyRoute=createStackNavigator({
        Home:Home,
        List:ListPage
})
export default class Navigator extends Compoennt{
        render(){
                return(
                            <View>
                                    <MyRoute />
                            </View>
                    )
            }
}
module.exports=Navigator
//App.js页面
import React,{Component} from 'react'
import {View,Text} from 'react-native'
import {createStackNavigator} from 'react-navigation'
var Router=require('./Navigatr.js');
export default class App extends Component{
    render(){
        return(
            <View>
                     <Router/>   
            </View>
        )    
    }
}