一、例子1

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

class MovieTalk extends Component {
    render() {
        return (
            // 最外面的一层
            <View style={{ flex: 1 }}>
                {/* 顶部-blue */}
                <View style={styles.header}>
                    <View style={styles.headerItem}>
                        <Text>item1</Text>
                    </View>
                    <View style={styles.headerItem}>
                        <Text>item2</Text>
                    </View>
                    <View style={styles.headerItem}>
                        <Text>item3</Text>
                    </View>
                </View>
                {/* 中部 */}
                <View style={styles.contents}></View>
                {/* 底部-gray */}
                <View style={styles.docker}></View>
            </View>
        )
    }
}

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 (
          <View style={styles.container}>
            <FlatList data={movieList.subjects} renderItem={({item})=><MoiveItem title={item.title} pic={item.images.large} rate={item.rating.average} />} keyExtractor={item=>item.title} />
          </View>
        )
    }
}

class MoiveItem extends Component{
  constructor(props){
    super(props)
    console.log(props.pic)
  }
  render(){
    return (
      <View style={styles.moiveItem}>
        <Image source={{uri:this.props.pic}}  style={styles.moviePic}></Image> 
        <View style={styles.movieInfo}>
          <Text>{this.props.title}</Text>
          <Text>评分: {this.props.rate}</Text>
        </View>
      </View>
    )
  }
}

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显示列表