weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
87 lines (72 loc) • 2.21 kB
Markdown
# SearchBar demo
- order: 0
样式自定义
---
````js
/** @jsx createElement */
import {createElement, Component,render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import SearchBar from 'nuke-search-bar';
import Icon from 'nuke-icon';
import Page from 'nuke-page';
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state = {
value:'',
value2:'',
value3:''
}
}
search = (data,e) =>{
this.setState({
value: data.value,
});
}
searchOnReturn2= (data) =>{
this.setState({
value2: data.value,
});
}
searchOnReturn3= (data) =>{
this.setState({
value3: data.value,
});
}
render() {
return (
<Page title="SearchBar">
<Page.Intro main="normal"></Page.Intro>
<SearchBar style={styles.wrap} onSearch={this.search} placeholder="输入搜索关键词" />
<View style={styles.relatedView}><Text style={styles.result}>要搜索的值：{this.state.value}</Text></View>
<SearchBar style={styles.wrap} onSearch={this.searchOnReturn2} showSearchButton={false} placeholder="回车搜索" />
<View style={styles.relatedView}><Text style={styles.result}>要搜索的值：{this.state.value2}</Text></View>
<Page.Intro main="自定义样式"></Page.Intro>
<SearchBar centered style={[styles.wrap,styles.dark]} onSearch={this.searchOnReturn3} showSearchButton={false} inputStyle={styles.input} placeholderColor={'#4F74B3'} placeholder="搜索" />
<View style={styles.relatedView}><Text style={styles.result}>要搜索的值：{this.state.value3}</Text></View>
</Page>
);
}
}
const styles={
wrap:{
backgroundColor:'#EBECF0',
},
relatedView:{
padding:'20rem'
},
dark:{
backgroundColor:'#333333',
},
input:{
borderRadius:30,
backgroundColor:'#E4F0FD'
},
result:{
fontSize:28,
color:'#999999'
}
}
render(<App/>);
````