react-native 学习笔记

视频学习笔记
```javascript
import React, { Component } from 'react';
import {View,Text,Image,StyleSheet, Platform,Platform,TextInput,TouchableOpacity} from 'react-native'
const STATUS_BAR_HEIGHT=20
class NavigationBar extends Component {
    static propTypes={
        style:View.propTypes.style,
        title:PropTypes.string,
        titleView:PropTypes.element,
        hide:PropTypes.bool,
        leftButton:PropTypes.element,
        rightButton:PropTypes.element
    }
    constructor(props){
        super(props)
        this.state={
            title:'',
            hide:false
        }
    }
    render () {
        // let status=<View style={styles.statusBar}></View>1
    let titleView=this.props.titleView?this.props.titleView:<Text>{this.props.title}</Text>
        let content=<View style={styles.navBar}>
            {this.props.leftButton}
            <View style={styles.titleView}>
            {titleView}
            </View>
            {this.props.rightButton}
        </View>
        return (
            <View style={style.container}>
                {content}
            </View>
        );
    }
}
const styles=StyleSheet.create({
    container:{
        backgroundColor:'gray'
    },
    navBar:{
        justifyContent:'space-between',
        alignItems:'center',
        height:Platform.OS==='ios'?ios.height:NAV_BAR_HEIGHT,
        backgroundColor:'rgba(0,0,0,0.1)',
        flexDirection:'row'
    },
    titleView:{
        justifyContent:'center',
        alignItems:'center',
        position:'absolute',
        left:40,
        right:40,
        top:0,
        bottom:0
    },
    title:{
        fontSize:12,
        color:'black'
    }
})
export default NavigationBar;

import React, { Component } from 'react';
import {View,Text,Image,StyleSheet, Platform,Platform,TextInput,TouchableOpacity,StatusBar} from 'react-native'
const STATUS_BAR_HEIGHT=20
class SearchNavigationBar extends Component {

    constructor(props){
        super(props)
        this.state={
            title:'',
        }
    }
    goBack(){
        this.refs.input.blur();
    }
    toSearch(){

    }
    updateState(){

    }
    render () {
        let StatusBar=null;
        return (
            <View style={style.container}>
                <View style={styles.leftButton}>
                    <TouchableOpacity onPress={()=>this.goBack()}>
                        <Image source={uri=''}/>
                    </TouchableOpacity>
                </View>
                <View style={styles.centerView}>
                   <TextInput style={styles.textInput}
                        onChangeText={(value) => {
                            this.searchBook(value)
                        }}
                        returnKeyType={'search'}
                        maxLength={30}
                        placeholder={'请输入关键字'}
                   />
                </View>
                <View style={styles.rightButton}>
                    <TouchableOpacity onPress={()=>{
                        this.toSearch()
                        this.refs.input.blur();
                    }}>
                        <Image source={uri=''}/>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        alignItems:'stretch'
    },
    textInput:{
        flex:1,
        height:28,
        borderWidth:1,
        borderColor:'gray'
    },
    leftButton:{

    },
    centerView:{

    },
    rightButton:{

    }
})
export default SearchNavigationBar;

import React, { Component } from 'react';
import {View,Text,Image,FlatList,StyleSheet, Platform,TextInput,TouchableOpacity,StatusBar} from 'react-native'
import SearchBar from './SearchNavigationBar'
class SearchNavigationBar extends Component {

    constructor(props){
        super(props)
        this.state={
            searchHistoryList:[],
        }
    }
    renderHistory (item) {
		return (
			<TouchableOpacity style={styles.itemList}>
				<View style={styles.itemContainer}>
					<Text style={styles.itemTitle}>{item}</Text>
				</View>
			</TouchableOpacity>
		)
	};
    render () {
        let StatusBar=null;
        let {searchHistoryList}=this.state
        return (
            <View style={style.container}>
               <SearchBar/>
               <View>
                    <View>
                        <Text>最近搜索</Text>
                        <FlatList
                          data={searchHistoryList}
                          renderItem={this.renderHistory}
                        />
                    </View>
               </View>
            </View>
        );
    }
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        alignItems:'stretch'
    },
    textInput:{
        flex:1,
        height:28,
        borderWidth:1,
        borderColor:'gray'
    },
    leftButton:{

    },
    centerView:{

    },
    rightButton:{

    }
})
export default SearchNavigationBar;

import React,{Component} from 'react'
import {NavigationActions} from 'react-navigation';
export default class NavigateUtil{
    /**
     * 
     * @param {跳转到搜索页面} navigation 
     */
    static goToSearch(params){
        const {navigation,theme}=params;
        navigation.navigate('SearchPage',{
            navigation:navigation,
            theme:theme
        })
    }
    /**
     * 
     * @param {返回上一级} navigation 
     */
    static goBack(navigation){
        navigation.goBack();
    }

    /**
     * 
     * @param {搜索跳转} params 
     */
    static goToList(params){
        const {navigation,projectModel,flag,theme}=params
        navigation.navigate('page',{
            navigation:navigation,
            projectModel:projectModel,
            flag:flag,
            theme:theme

        })
    }


}