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';

然后在场景中确保在渲染函数中调用组件

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

Answer 2

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

那样做

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

2 个答案: