Как разместить компонент в нижней части экрана - PullRequest
Новая
       18

Как разместить компонент в нижней части экрана

0 голосов
/ 21 мая 2018

Я пытаюсь расположить компонент SegmentedControlIOS в нижней части экрана: 

return (
  <View style={styles.container}>
    <Button title="toggle names" onPress={this.toggleContacts}  />
    <Button title="sort" onPress={this.sort}  />
    <Button title="New contact" onPress={this.toggleForm}  />

    { this.state.showForm &&
      <AddContactForm
        addContact={this.addContact}/>
    }
    {this.state.show && this.state.selectedIndex === 0 &&
      <ScrollView >
        {this.state.contacts.map(contact=>(
          <Row  {...contact}/> ))}
      </ScrollView>}
    {this.state.show && this.state.selectedIndex === 1 &&
      <FlatList
        data={this.state.contacts}
        keyExtractor = { (item, index) => index.toString() }
        renderItem={renderItem}>
      </FlatList>}
    {this.state.show && this.state.selectedIndex === 2 &&
      <ContactsList
        contacts={this.state.contacts}>
      </ContactsList>}
    <View flex bottom style={{flex:1,}}>
      <SegmentedControlIOS
        values={['ScrollView', 'FlatList','SectionList']}
        selectedIndex={this.state.selectedIndex}
        onChange={(event) => {
          this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
        }} />
      </View>
  </View>
)
}
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    // alignItems: 'flex-start',
    paddingTop: Constants.statusBarHeight + 25,

  },
  row: {
    padding:20,
  },
  input: {
    padding:5,

    borderColor:'black',
    borderWidth:1,
  },
 });

1 Ответ

0 голосов
/ 21 мая 2018 

  <View  style={{flex:1,justifyContent:'flex-end',marginBottom:20}}>
          <SegmentedControlIOS
            values={['ScrollView', 'FlatList','SectionList']}
            selectedIndex={this.state.selectedIndex}
            onChange={(event) => {
              this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex});
            }} />
          </View>
...