react-native布局例子

一、例子1

import React, {Component} from 'react'; //react本身的
import {Platform, StyleSheet, Text, View} from 'react-native'; //native引入的

class MovieTalk extends Component {
    render() {
        return (
            // 最外面的一层
            
                {/* 顶部-blue */}
                
                    
                        item1
                    
                    
                        item2
                    
                    
                        item3
                    
                
                {/* 中部 */}
                
                {/* 底部-gray */}
                
            
        )
    }
}

let styles = StyleSheet.create({
    header: {
        backgroundColor: "#3476AF",
        height: 200,
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: 'center'
    },
    headerItem: {
        backgroundColor: "red"
    },
    contents: {
        flex: 10
    },
    docker: {
        backgroundColor: "#DBDBDB",
        flex: 1
    }
})

export default MovieTalk

简单布局1

例子2

涉及知识点

• FaltList
  • 原来的ListView官方抛弃了
  • 配合renderItem
  • 使用keyExtractor指明每个item的key

代码

• movies.js是把豆瓣API得到的结果默认导出
• 核心代码

class MovieTalk extends Component {
    render() {
        return (
          
            } keyExtractor={item=>item.title} />
          
        )
    }
}

class MoiveItem extends Component{
  constructor(props){
    super(props)
    console.log(props.pic)
  }
  render(){
    return (
      
         
        
          {this.props.title}
          评分: {this.props.rate}
        
      
    )
  }
}

let styles = StyleSheet.create({
  container:{
    flex:1,
  },
  moiveItem:{
    flexDirection:'row',
    borderWidth: 1,
    borderColor: 'gray',
    marginTop:5,
    height:70,
  },
  moviePic:{
    flex:1
  },
  movieInfo:{
    flex:4,
    paddingLeft:10,
    justifyContent:'center',
  }
})
export default MovieTalk

使用FlatList显示列表