视频学习笔记
```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 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{
static goToSearch(params){
const {navigation,theme}=params;
navigation.navigate('SearchPage',{
navigation:navigation,
theme:theme
})
}
static goBack(navigation){
navigation.goBack();
}
static goToList(params){
const {navigation,projectModel,flag,theme}=params
navigation.navigate('page',{
navigation:navigation,
projectModel:projectModel,
flag:flag,
theme:theme
})
}
}