react-native - NavigatorとtoolbarAndroid

Question

toolbarAndroidをナビゲータと組み合わせてアプリケーションのすべての画面で使用するように設定する方法はありますか？

Iはindex.android.jsにおけるナビゲータ設定：最初の画面は、連絡先リストを表示

import React, { Component } from 'react'; 

import { 
    AppRegistry, 
    Navigator, 
} from 'react-native'; 

import ContactList from './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); 

を：

import React, { Component, PropTypes } from 'react'; 
import { 
    Text, 
    View, 
    TouchableOpacity, 
    TouchableHighlight, 
    ListView, 
    Image, 
    ActivityIndicator, 
    ToolbarAndroid, 
} from 'react-native'; 

import styles from '../../styles'; 
import ContactDetails from './ContactDetails'; 
import logo from '../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 to json 
     .then((response) => response.json()) 
     // do some 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; 
    } 
} 

2つ目は、連絡先の詳細を表示：

import React, { 
    Component, 
    PropTypes, 
} from 'react'; 

import { 
    Text, 
    View, 
    Image, 
    ToolbarAndroid, 
} from 'react-native'; 

import styles from '../../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, 
}; 

最初の画面にtoolbarAndroidを設定し、2番目の画面に別の設定を行いましたが、うまくいきましたがtoolbarAndroidを1つだけ定義してsetStateを呼び出すように更新するほうがよいと感じています。

どうすればよいですか？

Answer 1

は、私は、ビューにtoolbarAndroidとナビゲーターをラップすることによってそれを行うことができました。

Answer 2

NavigatorクラスをToolbarAndroidでラップします。このようにして、NavigatorでレンダリングされるものはすべてToolbarでラップされます。実際には、これらのシーンで共通するものはすべて、残りの部分をラップする単一のコンポーネントに置く必要があります。

class MyIndex extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     appTitle: 'Test', 
     appLogo: logo, 
    }; 
    } 
    render() { 
    return (
     <View 
     style={styles.container} 
     > 
     <ToolbarAndroid 
      logo={this.state.appLogo} 
      title={this.state.appTitle} 
      subtitle={this.state.appSubTitle} 
      style={[{ backgroundColor: '#e9eaed', height: 56 }]} 
     /> 
     <Navigator 
      initialRoute={{ name: 'index', component: ContactList }} 
      renderScene={(route, navigator) => { 
      if (route.component) { 
       return React.createElement(route.component, { navigator, ...route.props }); 
      } 

      return undefined; 
      }} 
     /> 
     </View> 
    ); 
    } 
}