React native react native-导航器和工具栏

有没有办法将应用程序的每个屏幕上只使用一个工具栏和一个导航器

我在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}来自'React'；
进口{
评估学，
领航员，
}从“反应本机”；
从“/src/containers/ContactList.js”导入联系人列表；
类MyIndex扩展了组件{
render（）{
返回(
{
if（路由组件）{
返回React.createElement（route.component，{navigator，…route.props}）；
}
返回未定义；
}}
/>
);
}
}
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;
  }
}

import React，{Component，PropTypes}来自'React'；
进口{
文本，
看法
可触摸不透明度，
触控高光，
ListView，
形象,，
活动指示器，
安卓，
}从“反应本机”；
从“../../styles”导入样式；
从“/ContactDetails”导入ContactDetails；
从“../images/ic_launcher.png”导入徽标；
常量url=http://api.randomuser.me/?results=15&seed=azer';
导出默认类ContactList扩展组件{
静态类型={
导航器：PropTypes.object.isRequired，
}
建造师（道具）{
超级（道具）；
const datasource=new ListView.datasource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
动画：错误，
动画大小：0，
jsonData:datasource.cloneWithRows（[]），
ds：数据源，
appTitle:“测试”，
appLogo:logo，
};
}
_女佣（）{
这是我的国家({
动画：对，
动画大小：80，
});
返回获取（url）
//转换为json
.then（（response）=>response.json（））
//对json执行一些字符串操作
。然后（{results}）=>{
const newResults=results.map（（用户）=>{
常量newUser={
…用户，
姓名：{
标题：`${user.name.title.charAt（0.toUpperCase（）}${user.name.title.slice（1）}`，
第一个：`${user.name.first.charAt（0.toUpperCase（）}${user.name.first.slice（1）}`，
last:`${user.name.last.charAt（0.toUpperCase（）}${user.name.last.slice（1）}`，
},
};
返回新用户；
});
返回新结果；
})
//设定状态
。然后（（结果）=>{
这是我的国家({
appSubTitle:“联系人列表”，
动画：错误，
动画大小：0，
jsonData:this.state.ds.cloneWithRows（结果），
});
});
}
renderRow（行数据：字符串）{
返回(
{
这个是.props.navigator.push({
第一个：rowData.name.first，
组成部分：联系人详细信息，
道具：{
标题：rowData.name.title，
第一个：rowData.name.first，
last:rowData.name.last，
图片：rowData.picture.large，
缩略图：rowData.picture.缩略图，
},
});
}}
>
{rowData.name.title}{rowData.name.first}{rowData.name.last}
);
}
render（）{
常量视图=(
这个。_handlePress（）}
style={style.button}
size=“大”
>
获取结果？
this.renderRow（rowData）}
onPress={（）=>此操作。_handleRowClick（）}
/>
);
返回视图；
}
}

第二个显示联系人详细信息：

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,
};

import-React{
组成部分，
道具类型，
}从"反应",；
进口{
文本，
看法
形象,，
安卓，
}从“反应本机”；
从“../../styles”导入样式；
导出默认类ContactDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
动画：错误，
动画大小：0，
appTitle:“测试”，
appLogo:{uri:this.props.缩略图，高度：56}，
appSubTitle:`Contact Details-${this.props.first}${this.props.last}`，
};
}
render（）{
返回(
{this.props.title}{this.props.first}{this.props.last}
);
}
}
ContactDetails.propTypes={
标题：PropTypes.string.isRequired，
首先：需要PropTypes.string.isRequired，
最后：需要PropTypes.string.isRequired，
图片：PropTypes.string.isRequired，
缩略图：PropTypes.string.isRequired，
};

我在第一个屏幕和第二个屏幕上分别设置了一个toolbarAndroid，它运行良好，但我觉得最好只定义一个toolbarAndroid，然后调用setState进行更新

---

有可能吗？如果有，怎么办？

用

工具栏Android

包装您的

导航器

类。这样，在

导航器

上呈现的所有内容都将被

工具栏

包装。事实上，这些场景之间的所有共同点都应该放在一个单独的组件上，以包装其余部分

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>
    );
  }
}

类MyIndex扩展组件{
render（）{
返回(
{
if（路由组件）{
返回React.createElement（route.component，{navigator，…route.props}）；
}
返回未定义；
}}
/>
);
}
}

我通过在视图中包装工具栏和导航器来实现这一点：

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>
    );
  }
}

类MyIndex扩展组件{
建造师（道具）{
超级（道具）；
此.state={
appTitle:“测试”，
appLogo:logo，
};
}
render（）{
返回(
{
if（路由组件）{
返回React.createElement（route.component，{navigator，…route.props}）；
}
返回未定义；
}}
/>
);
}
}

谢谢，但它不起作用，内容显示在工具栏内。