Изменение содержимого сегмента на Press

Question

Изменение содержимого сегмента на Press

У меня есть сегменты, и я хочу, чтобы они действовали как вкладки. Я пытался с помощью 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>

1

react-native native-base segment

Источник

user9706421 18 сен '18 в 18:37

1 ответ

Решение

Другие вопросы по тегам react-native native-base segment

user6606831 18 сен '18 в 19:00 2018-09-18 19:00 · Accepted Answer · 2018-09-18 19:00

Сегменты могут быть настроены как 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