React Native作业 -- 搭建开发环境熟悉布局(20160329)

bob-chen commented 8 years ago

搭建React Native开发环境(iOS,Android)，实现一个头部的搜索框，如下：

作业1

基本分--8分

加分项：把头部封装成一个组件--2分

bob-chen commented 8 years ago

简单的封装一个组件

新建一个js文件，比如Header.js

写一个类，继承Component

'use strict';

import React, {
    Component,
    Image,
    TextInput,
    View,
    Platform,
    PixelRatio,
    StyleSheet
} from 'react-native';

export default class Header extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image source={require('./images/header/header_logo.png')} style={styles.logo} />
                <View style={styles.searchBox}>
                    <Image source={require('./images/header/icon_search.png')} style={styles.searchIcon} />
                    <TextInput
                        keyboardType='web-search'
                        placeholder='搜索'
                        style={styles.inputText} />
                    <Image source={require('./images/header/icon_voice.png')} style={styles.voiceIcon} />
                </View>
                <Image source={require('./images/header/icon_qr.png')} style={styles.scanIcon} />
            </View>
        )
    }
}

写入相应的style。

然后，在想用的地方引用这个组件

import Header from './Header';

在render函数中直接使用：

    render() {
        return (
            <View style={{flex:1}}>
                <Header />
            </View>
        )
    }

另外最好加一个MainScreen.js的文件，把这个文件作为主屏，在index.ios.js和index.android.js文件中引入这个文件，并使用

import MainScreen from './MainScreen';

class AwesomeProject extends Component {

  render() {
    return (<MainScreen/>);
  }

}

这样一般ios和android就可以一套代码，减少代码冗余。

Javinzhong commented 8 years ago

推荐仿京东app的教程：https://github.com/yuanguozheng/JdApp

doproio / pratice-of-react-native

React Native作业 -- 搭建开发环境熟悉布局(20160329) #1

简单的封装一个组件