如何將現有組件添加到react-native-router-flux

我想將我當前的頭和腳本添加到react-native-router-flux路由器。但我不知道如何做到這一點。這是我的頭如何將現有組件添加到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> 
); 
} 
}

目前我找不到方法來做到這一點？誰能告訴我該怎麼做？

來源

2017-02-26 D.Kenny

如果在每個場景上都有相同的頁眉和頁腳是您想要的，則一種方法是導出頁眉和頁腳組件，然後將它們導入到每個場景中。

export class FootBar extends Component {...}

在頂部每個場景

然後有：

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

然後在現場，一定要調用組件的渲染功能

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

來源

2017-02-26 21:54:32 Teedub

我想要的其實是添加頁眉和頁腳中的路由器，這樣的情景是可以改變的很好 –

我明白了，好看看這個答案，看看它是更多的你正在尋找http://stackoverflow.com/a/36262494/5287007 – Teedub

如果頭你說的是自定義導航欄然後是的，有一種方法可以實現this。至於頁腳，我認爲唯一的辦法就是要做得像this

來源

2017-02-27 09:09:56 Igorsvee

如何將現有組件添加到react-native-router-flux

回答

相關問題