is there way set 1 toolbarandroid used on every screen of application in conjunction navigator.
i set navigator in index.android.js :
import react, { component } 'react'; import { appregistry, navigator, } 'react-native'; import contactlist './src/containers/contactlist.js'; class myindex extends component { render() { return ( <navigator initialroute={{ name: 'index', component: contactlist }} renderscene={(route, navigator) => { if (route.component) { return react.createelement(route.component, { navigator, ...route.props }); } return undefined; }} /> ); } } appregistry.registercomponent('reactest', () => myindex); the first screen displays contact list :
import react, { component, proptypes } 'react'; import { text, view, touchableopacity, touchablehighlight, listview, image, activityindicator, toolbarandroid, } 'react-native'; import styles '../../styles'; import contactdetails './contactdetails'; import logo '../images/ic_launcher.png'; const url = 'http://api.randomuser.me/?results=15&seed=azer'; export default class contactlist extends component { static proptypes = { navigator: proptypes.object.isrequired, } constructor(props) { super(props); const datasource = new listview.datasource({ rowhaschanged: (r1, r2) => r1 !== r2 }); this.state = { animating: false, animatingsize: 0, jsondata: datasource.clonewithrows([]), ds: datasource, apptitle: 'test', applogo: logo, }; } _handlepress() { this.setstate({ animating: true, animatingsize: 80, }); return fetch(url) // convert json .then((response) => response.json()) // string manipulation on json .then(({ results }) => { const newresults = results.map((user) => { const newuser = { ...user, name: { title: `${user.name.title.charat(0).touppercase()}${user.name.title.slice(1)}`, first: `${user.name.first.charat(0).touppercase()}${user.name.first.slice(1)}`, last: `${user.name.last.charat(0).touppercase()}${user.name.last.slice(1)}`, }, }; return newuser; }); return newresults; }) // set state .then((results) => { this.setstate({ appsubtitle: 'contacts list', animating: false, animatingsize: 0, jsondata: this.state.ds.clonewithrows(results), }); }); } renderrow(rowdata: string) { return ( <touchablehighlight onpress={() => { this.props.navigator.push({ first: rowdata.name.first, component: contactdetails, props: { title: rowdata.name.title, first: rowdata.name.first, last: rowdata.name.last, picture: rowdata.picture.large, thumbnail: rowdata.picture.thumbnail, }, }); }} > <view style={styles.listview_row}> <image source={{ uri: rowdata.picture.thumbnail }} style={{ height: 48, width: 48 }} /> <text> {rowdata.name.title} {rowdata.name.first} {rowdata.name.last} </text> </view> </touchablehighlight> ); } render() { const view = ( <view style={styles.container}> <toolbarandroid logo={this.state.applogo} title={this.state.apptitle} subtitle={this.state.appsubtitle} style={[{ backgroundcolor: '#e9eaed', height: 56 }]} /> <activityindicator animating={this.state.animating} style={[styles.centering, { height: this.state.animatingsize }]} /> <touchableopacity onpress={() => this._handlepress()} style={styles.button} size="large" > <text>fetch results?</text> </touchableopacity> <listview enableemptysections datasource={this.state.jsondata} renderrow={(rowdata) => this.renderrow(rowdata)} onpress={() => this._handlerowclick()} /> </view> ); return view; } } and second 1 displays contact details :
import react, { component, proptypes, } 'react'; import { text, view, image, toolbarandroid, } 'react-native'; import styles '../../styles'; export default class contactdetails extends component { constructor(props) { super(props); this.state = { animating: false, animatingsize: 0, apptitle: 'test', applogo: { uri: this.props.thumbnail, height: 56 }, appsubtitle: `contact details - ${this.props.first} ${this.props.last}`, }; } render() { return ( <view style={styles.container}> <toolbarandroid logo={this.state.applogo} title={this.state.apptitle} subtitle={this.state.appsubtitle} style={[{ backgroundcolor: '#e9eaed', height: 56 }]} /> <image source={{ uri: this.props.picture }} style={{ height: 128, width: 128 }} /> <text>{this.props.title} {this.props.first} {this.props.last}</text> </view> ); } } contactdetails.proptypes = { title: proptypes.string.isrequired, first: proptypes.string.isrequired, last: proptypes.string.isrequired, picture: proptypes.string.isrequired, thumbnail: proptypes.string.isrequired, }; i set toolbarandroid in first screen , in second screen, it's working well, have feeling better define 1 toolbarandroid , update calling setstate.
is possible, if how ?
wrap navigator class toolbarandroid. way, rendered on navigator wrapped toolbar. actually, common between scenes should put on single component wrapping rest.
class myindex extends component { render() { return ( <toolbarandroid> <navigator initialroute={{ name: 'index', component: contactlist }} renderscene={(route, navigator) => { if (route.component) { return react.createelement(route.component, { navigator, ...route.props }); } return undefined; }} /> </toolbarandroid> ); } } 
Comments
Post a Comment