变段内容onPress
变段内容onPress
提问于 2018-09-18 18:37:10
我有片段，我想让它们充当标签。我试着使用每个片段的react-navigation onPress，但看起来不太好。
我希望这些片段保持固定，在顶部，在单击每个片段时，内容应该更改，或调用特定组件，而不重新加载或注意到屏幕已发生变化。
<Segment>
<Button first>
<Text>Puppies</Text>
</Button>
<Button>
<Text>Kittens</Text>
</Button>
<Button last active>
<Text>Cubs</Text>
</Button>
</Segment>
<Content>
<Text>Awesome segment</Text>
</Content>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-18 19:00:16
段可以自定义为一个react-navigation，单个屏幕分离为多个组件，这些组件可以按需呈现。
示例
(使用本机基组件)
state = {
activePage:1,
}
selectComponent = (activePage) => () => this.setState({activePage})
_renderComponent = () => {
if(this.state.activePage === 1)
return <Component1/> //... Your Component 1 to display
else
return <Component2/> //... Your Component 2 to display
}
render() {
return (
<Container>
<Header>
<Left />
<Body>
<Segment>
<Button active={this.state.activePage === 1}
onPress={this.selectComponent(1)}><Text>Component 1</Text></Button>
<Button active={this.state.activePage === 2}
onPress= {this.selectComponent(2)}><Text>Component 2</Text></Button>
</Segment>
</Body>
<Right/>
</Header>
<Content padder>
{this._renderComponent()}
</Content>
</Container>
)
}您可以根据上面设置的条件自定义它以添加更多组件。
编辑
如果您导航到一个也包含Segment的特定屏幕，则单击“在某些项”按钮即可。
this.props.navigation.navigate('OtherSegmentScreen', {activePage: this.state.activePage})在该页面上，接收props作为
const {navigate} = this.props.navigation
const previousActiveSegment = navigate.getParams('activePage', '1') //... 1 is default value that you can set页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52392725
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号