更改片段内容 onPress答案

【问题标题】：Changing segment content onPress更改片段内容 onPress
【发布时间】：2019-02-22 20:28:25
【问题描述】：

我有段，我希望它们充当标签。我尝试使用每个段的react-navigationonPress，但看起来不太好。

我希望片段保持固定在顶部，并且在点击每个片段时内容应该改变 或 调用特定的组件 无需重新加载或注意到屏幕已更改。

<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>

【问题讨论】：

标签： react-native native-base segment

【解决方案1】：

可以将片段自定义为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

【讨论】：

如何更改活动状态的样式？
active 标签会如前所述处理它，但如果您需要更改样式，您可以随时按提到的每个按钮执行<Button style={[... other styles, this.state.activePage === 1 : {... activeStyles}]}。
是否可以在其中一个段处于活动状态时禁用其他段？
可以禁用，如果你将当前段的状态作为道具传递给另一个组件并根据使用情况进行检查
Pritish Vaidya 可以在示例中更新它吗？