![](/img/trans.png)
[英]How to set up title of Scene component in react-native-router-flux
[英]How to add existing component to the 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>
);
}
}
目前,我找不到解决办法? 谁能告诉我该怎么做?
如果只需要在每个场景上具有相同的页眉和页脚,则一种方法是导出页眉和页脚组件,然后将它们导入每个场景。
export class FootBar extends Component {...}
然后在顶部的每个场景中都有:
import {Footbar} from '../your/path/to/Footbar.js';
然后确保在场景中调用渲染函数中的组件
...
render() {
return (
...
<FootBar/>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.