如何将现有组件添加到 react-native-router-flux

Question

我想将我当前的页眉和脚栏添加到我的 react-native-router-flux 路由器。但我不知道如何正确地做到这一点。这是我的标题

class Button extends Component {
  handlePress(e) {
    if (this.props.onPress) {
      this.props.onPress(e);
    }
  }

  render() {
    return (
      <TouchableOpacity
        onPress={this.handlePress.bind(this)}
        style={this.props.style}
      >
        <Text>{this.props.children}</Text>
      </TouchableOpacity>
    );
  }
}


class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      selectedItem: 'About'
    };
  }

  onMenuItemSelected(item) {
    this.setState({
      isOpen: false,
      selectedItem: item
    });
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  updateMenuState(isOpen) {
    this.setState({ isOpen });
  }

  render() {
    const menu = <Menu onItemSelected={this.onMenuItemSelected} />;
    return (
      <SideMenu
        menu={menu}
        isOpen={this.state.isOpen}
        onChange={(isOpen) => this.updateMenuState(isOpen)}
        menuPosition='right'
      >
      <LoginForm />
      <Button style={styles.button} onPress={() => this.toggle()}>
          <Image
            source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32 }}
          />
      </Button>
      </SideMenu>
    );
  }
}

这是页脚

class FootBar extends Component {
  constructor(props) {
    super(props);
    console.log(this.props.page);
    if (this.props.page !== undefined) {
      this.state = {
        page: this.props.page
      };
    }
    this.state = {
      page: 'home'
    };
    this.pageChange = this.pageChange.bind(this);
  }

  pageChange(page) {
    this.setState({page});
    switch (page) {
      case 'home':
        Actions.login(page);
        break;
      case 'user-plus':
        Actions.registerUser(page);
        break;
      case 'car':
        Actions.CarList(page);
        break;
      case 'user':
        Actions.Profile(page);
        break;
      case 'truck':
        Actions.CreateCar(page);
        break;
      case 'camera-retro':
        Actions.OpenCamera(page);
        break;
      default:
        Actions.login(page);
        break;
    }
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Tabs
          selected={this.state.page}
          style={{
            borderTopWidth: 1,
            borderColor: 'lightgrey',
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            paddingTop: 1,
          }}
          onSelect={el => this.pageChange(el.props.name)}
        >
          <Icon style={styles.icon} name='home' size={30} color='#rgba(4, 4, 4, 0.65)'/>
          <Icon style={styles.icon} name='user-plus' size={29} color='#rgba(4, 4, 4, 0.65)'/>
          <Icon style={styles.icon} name='car' size={29} color='#rgba(4, 4, 4, 0.65)'/>
          <Icon style={styles.icon} name='user' size={31} color='#rgba(4, 4, 4, 0.65)'/>
          <Icon style={styles.icon} name='truck' size={30} color='#rgba(4, 4, 4, 0.65)'/>
          <Icon style={styles.icon} name='camera-retro' size={29} color='#rgba(4, 4, 4, 0.65)'/>
        </Tabs>
      </View>
    );
  }
}

这是路由器，我想将我的标头添加为每个组件都可以拥有的标头，并将我的页脚添加为可以在我的应用程序周围导航用户的页脚

class RouterComponent extends Component {
  render() {
  return (
    <Router duration={0}>
          <Scene key="login" component={LoginForm} initial />
          <Scene key="showCar" component={showCar} />
          <Scene key="registerUser" component={RegisterForm} />
          <Scene key="CarList" component={CarList} />
          <Scene key="CarDetail" component={CarDetail} />
          <Scene key="bookCar" component={bookCar} />
          <Scene key="Profile" component={Profile} />
          <Scene key="Confirmation" component={Confirmation} />
          <Scene key="CreateCar" component={CreateCar} />
          <Scene key="CarPhotos" component={CarPhotos} />
          <Scene key="AdditionalCarInfo" component={AdditionalCarInfo} />
          <Scene key="OpenCamera" component={OpenCamera} />
    </Router>
  );
}
}

目前我找不到这样做的方法？谁能告诉我该怎么做？

Answer 1

如果您只想在每个场景上使用相同的页眉和页脚，一种方法是导出页眉和页脚组件，然后将它们导入到每个场景中。

export class FootBar extends Component {...}

然后在每个场景的顶部有：

import {Footbar} from '../your/path/to/Footbar.js';

那么在Scene中一定要在render函数中调用组件

...
render() {
    return (
        ...
        <FootBar/>   
    )
}

Answer 2

如果标题是指自定义导航栏，那么是的，有一种方法可以实现 this 。 至于页脚，我认为唯一的方法是像this