React Native中如何无需设置宽度让TextInput动态填充剩余空间

问题描述 #

我有一个React Native项目，当前制作了一个包含TextInput和视图选择器的栏。视图选择器尺寸较小，TextInput目前也偏小。我希望在不改变其他元素的前提下，让TextInput动态填充它与视图选择器之间的空白区域。

原始代码 #

import React, { useState } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native'

import { Feather } from '@expo/vector-icons'

const SearchAndFilterComponent = () => {

  const [search, setSearch] = useState()

  return (
    <View style={styles.container}>
      <View style={styles.bar}> 
        <View style={styles.searchContainer}>
          <View style={styles.search}>
            ----------------------------------------------------------------------------------
            <View style={styles.searchIconContainer}>
              <Feather style={styles.searchIcon} name='search' color={'#273be2'} size={24} />
            </View>
            <View style={styles.searchInputContainer}>
              <TextInput style={styles.searchInput} value={search} onChange={setSearch}  placeholder={'search'}/>
            </View>
            ----------------------------------------------------------------------------------
          </View>
          <View style={styles.navigationContainer}>
            <Feather name='navigation' color={'#273be2'} size={24} />
          </View>
        </View>
        <View style={styles.mapContainer}>
          <View style={styles.splitter}></View>
          <Feather style={styles.buttonIcon} name='map' color={'#273be2'} size={24} />
          <Text style={styles.text}>Map</Text>
        </View>
      </View>
      <View style={styles.bar}>
        <View style={styles.sorfAndFilter}>
          <View style={styles.buttonContainer}>
            <Feather name='filter' color={'#273be2'} size={24} />
            <Text style={styles.text}>Filter</Text>
          </View>
          <View style={styles.buttonContainer}>
            <Feather name='sliders' color={'#273be2'} size={24} />
            <Text style={styles.text}>Sort</Text>
          </View>
        </View>
        <View style={styles.buttonContainer}>
          <Feather name='download' color={'#273be2'} size={24} />
          <Text style={styles.text}>Save</Text>
        </View>
      </View>
      <View style={styles.bar}>
        <View>
          <Text style={styles.text}>Results: "Palm Springs, CA"</Text>
        </View>
        <View>
          <Text style={styles.text}>2,345 Properties</Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginTop: 50
  },
  bar: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  searchContainer: {
    display: 'flex',
    flexDirection: 'row'
  },
  search: {
    display: 'flex',
    flexDirection: 'row'
  },
  splitter: {
    height: 20,
    width: 2,
    backgroundColor: 'lightgrey',
    marginHorizontal: 8
  },
  mapContainer: {
    display: 'flex',
    flexDirection: 'row'
  },
  sorfAndFilter: {
    display: 'flex',
    flexDirection: 'row'
  },
  buttonContainer: {
    display: 'flex',
    flexDirection: 'row'
  },
  searchInputContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch'
  },
  searchInput: {
    fontSize: 17,
    borderBottomWidth: 2,
    borderBottomColor: 'grey',
    alignItems: 'stretch'
  },
  text: {
    fontSize: 17
  },
  buttonIcon: {
    marginRight: 4
  }
})

export default SearchAndFilterComponent

解决方案 #

只需要调整几个样式属性并修正一处回调错误，就能让TextInput自动填充空白区域，且不影响其他元素：

修改后的完整代码 #

import React, { useState } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native'

import { Feather } from '@expo/vector-icons'

const SearchAndFilterComponent = () => {

  const [search, setSearch] = useState('')

  return (
    <View style={styles.container}>
      <View style={styles.bar}> 
        <View style={styles.searchContainer}>
          <View style={styles.search}>
            <View style={styles.searchIconContainer}>
              <Feather style={styles.searchIcon} name='search' color={'#273be2'} size={24} />
            </View>
            <View style={styles.searchInputContainer}>
              <TextInput style={styles.searchInput} value={search} onChangeText={setSearch} placeholder={'search'}/>
            </View>
          </View>
          <View style={styles.navigationContainer}>
            <Feather name='navigation' color={'#273be2'} size={24} />
          </View>
        </View>
        <View style={styles.mapContainer}>
          <View style={styles.splitter}></View>
          <Feather style={styles.buttonIcon} name='map' color={'#273be2'} size={24} />
          <Text style={styles.text}>Map</Text>
        </View>
      </View>
      <View style={styles.bar}>
        <View style={styles.sorfAndFilter}>
          <View style={styles.buttonContainer}>
            <Feather name='filter' color={'#273be2'} size={24} />
            <Text style={styles.text}>Filter</Text>
          </View>
          <View style={styles.buttonContainer}>
            <Feather name='sliders' color={'#273be2'} size={24} />
            <Text style={styles.text}>Sort</Text>
          </View>
        </View>
        <View style={styles.buttonContainer}>
          <Feather name='download' color={'#273be2'} size={24} />
          <Text style={styles.text}>Save</Text>
        </View>
      </View>
      <View style={styles.bar}>
        <View>
          <Text style={styles.text}>Results: "Palm Springs, CA"</Text>
        </View>
        <View>
          <Text style={styles.text}>2,345 Properties</Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    marginTop: 50,
    paddingHorizontal: 10
  },
  bar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8
  },
  searchContainer: {
    flexDirection: 'row',
    flex: 1,
    alignItems: 'center'
  },
  search: {
    flexDirection: 'row',
    flex: 1,
    alignItems: 'center'
  },
  searchIconContainer: {
    marginRight: 8
  },
  searchInputContainer: {
    flex: 1,
    flexDirection: 'column'
  },
  searchInput: {
    flex: 1,
    fontSize: 17,
    borderBottomWidth: 2,
    borderBottomColor: 'grey'
  },
  navigationContainer: {
    marginLeft: 8
  },
  splitter: {
    height: 20,
    width: 2,
    backgroundColor: 'lightgrey',
    marginHorizontal: 8
  },
  mapContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  sorfAndFilter: {
    flexDirection: 'row'
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 16
  },
  text: {
    fontSize: 17,
    marginLeft: 4
  },
  buttonIcon: {}
})

export default SearchAndFilterComponent

关键修改说明 #

• 给searchContainer添加flex:1，让整个搜索区域占据栏目的左侧可用空间
• 给search容器添加flex:1，确保它能填满searchContainer中除导航图标外的所有宽度
• 给searchInputContainer和searchInput分别添加flex:1，让输入框逐层拉伸填充空白
• 修正TextInput的onChange为onChangeText（React Native中处理文本输入变更的正确回调）
• 添加了少量间距和对齐样式优化视觉效果，不影响核心功能
• 移除代码中多余的横线注释，避免渲染错误

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