如何将SegmentedControlIOS组件定位到屏幕底部？

我来帮你搞定这个SegmentedControlIOS固定在屏幕底部的问题～先看看你当前代码里的问题：你给SegmentedControl外层的View设置了flex:1，这会让它占据容器内剩余的所有空间，自然没法固定在底部。下面给你两种可行的调整方案：

方案一：利用Flex布局特性（推荐） #

把页面内容分成上下两部分：上方的按钮、列表等内容用一个View包裹并设置flex:1，让它占据所有可用空间；底部的SegmentedControl所在View不设置flex，这样它就会自动贴在屏幕底部。

修改后的完整代码如下：

return ( 
  <View style={styles.container}>
    {/* 上方内容区域：设置flex:1占据所有可用空间 */}
    <View style={{flex:1}}>
      <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}
        />
      )}
      {this.state.show && this.state.selectedIndex === 2 && (
        <ContactsList contacts={this.state.contacts}/>
      )}
    </View>

    {/* 底部SegmentedControl区域：自动贴底 */}
    <View style={{borderTopWidth: 1, borderTopColor: '#e0e0e0'}}>
      <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',
    paddingTop: Constants.statusBarHeight + 25,
  },
  row: {
    padding:20,
  },
  input: {
    padding:5,
    borderColor:'black',
    borderWidth:1,
  },
});

方案二：使用绝对定位 #

如果更倾向于直接固定位置，可以给SegmentedControl的外层View设置绝对定位，同时注意给容器添加底部内边距，避免上方内容被底部控件遮挡：

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}
      />
    )}
    {this.state.show && this.state.selectedIndex === 2 && (
      <ContactsList contacts={this.state.contacts}/>
    )}

    {/* 绝对定位固定在底部 */}
    <View style={styles.segmentContainer}>
      <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',
    paddingTop: Constants.statusBarHeight + 25,
    paddingBottom: 50, // 添加底部内边距，避免内容被遮挡
  },
  segmentContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
  },
  row: {
    padding:20,
  },
  input: {
    padding:5,
    borderColor:'black',
    borderWidth:1,
  },
});

两种方案都能实现你想要的效果，方案一更符合Flex布局的最佳实践，推荐优先使用～

内容的提问来源于stack exchange，提问作者DCR