我有细分,我希望它们充当标签。我尝试使用每个细分市场的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>
答案 0 :(得分:2)
段可以自定义为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