如何在 nativebase 的所有屏幕上使用通用页脚
how to use universal footer for all screens in nativebase
我是 react-native 的新手,我正在使用 nativebase UI 和 React Navigation
这是我的主屏幕。
我正在使用 nativebase 组件 Container, Header, Footer.
我的问题是如何创建一个可以在所有屏幕中导入的页脚或页眉文件?
所以我有一个通用的页脚模板,因为它在所有页面上都是一样的。
代码:
export default class Home extends React.Component {
render() {
return (
<Container>
<Header>
<Left/>
<Body>
<Title>Home</Title>
</Body>
<Right />
</Header>
<Content>
<Text>We have { this.props.screenProps.currentFriends.length } friends!</Text>
<Button
block
onPress={() =>
this.props.navigation.navigate('Friends')
}
>
<Text>Add some friends</Text>
</Button>
</Content>
<Footer>
<FooterTab>
<Button vertical active>
<Icon name="apps" />
<Text>Home</Text>
</Button>
<Button vertical>
<Icon name="person" />
<Text>Friends</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
可以有两种类型的可重用组件
- Stateful - 其中可重用组件 (footer/header/etc) 将有自己的状态
export default class MyFooter extends React.Component{
render() {
return (
<Left>
<Icon name="person" type="EvilIcon" />
<Text>{props.name}</Text>
</Left>
);
}
}
import MyFooter from "./MyFooter"; // <-- Don't forget to import
export default class YourScreen extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Container>
<Header/>
<Content />
<MyFooter name="Click Me" /> // <--- this is custom component
);
}
}
- Stateless - 它不会有任何状态,只是支持这两个组件驻留在同一个文件中
YourScreen.js
const MyFooter = props => {
if (props.name) {
return (
<Left>
<Icon name="person" type="EvilIcon" />
<Text>{props.name}</Text>
</Left>
);
} else {
return null;
}
};
export default class YourScreen extends React.Component {
render() {
return (
<Container>
<Header/>
<Content />
<MyFooter name="Click Me" /> // <--- this is custom component
);
}
}
我是 react-native 的新手,我正在使用 nativebase UI 和 React Navigation 这是我的主屏幕。
我正在使用 nativebase 组件 Container, Header, Footer.
我的问题是如何创建一个可以在所有屏幕中导入的页脚或页眉文件?
所以我有一个通用的页脚模板,因为它在所有页面上都是一样的。
代码:
export default class Home extends React.Component {
render() {
return (
<Container>
<Header>
<Left/>
<Body>
<Title>Home</Title>
</Body>
<Right />
</Header>
<Content>
<Text>We have { this.props.screenProps.currentFriends.length } friends!</Text>
<Button
block
onPress={() =>
this.props.navigation.navigate('Friends')
}
>
<Text>Add some friends</Text>
</Button>
</Content>
<Footer>
<FooterTab>
<Button vertical active>
<Icon name="apps" />
<Text>Home</Text>
</Button>
<Button vertical>
<Icon name="person" />
<Text>Friends</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
可以有两种类型的可重用组件
- Stateful - 其中可重用组件 (footer/header/etc) 将有自己的状态
export default class MyFooter extends React.Component{
render() {
return (
<Left>
<Icon name="person" type="EvilIcon" />
<Text>{props.name}</Text>
</Left>
);
}
}
import MyFooter from "./MyFooter"; // <-- Don't forget to import
export default class YourScreen extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Container>
<Header/>
<Content />
<MyFooter name="Click Me" /> // <--- this is custom component
);
}
}
- Stateless - 它不会有任何状态,只是支持这两个组件驻留在同一个文件中
YourScreen.js
const MyFooter = props => {
if (props.name) {
return (
<Left>
<Icon name="person" type="EvilIcon" />
<Text>{props.name}</Text>
</Left>
);
} else {
return null;
}
};
export default class YourScreen extends React.Component {
render() {
return (
<Container>
<Header/>
<Content />
<MyFooter name="Click Me" /> // <--- this is custom component
);
}
}