反应原生风格.width:百分比-数字

我想这样做width: 100% - 50,我可以在它的右侧添加一个50宽的图标.

我已经开始width: 100% - 20%使用react-native-extended-styles,但是我不明白为什么它有用,因为你可以做到width: '80%'.我不能width: 100% - 50工作.有办法吗？

尝试使用onLayout事件来获取容器宽度,然后设置容器宽度的to 100% - 50,但它不起作用.

    let Location = (props) => {
      let locationInputElement

      const blur = () => {
        locationInputElement.blur()
      }

      let inputContainerWidth

      return (
        
           {
              inputCOntainerWidth= event.nativeEvent.layout.width
              console.log(inputContainerWidth)
            }}

    
      
    
  )
}

它在console.logs 335时执行console.log,inputContainerWidth但宽度仍为100%.

我同意Viktor,你应该能够使用Flex Box实现这一目标.

这是我放在一起的东西:https://snack.expo.io/B1jDKOhyb

您将flexDirectionformRow 设置为row,然后将第一个子设置(ViewAutoComplete组件的持有者设置为flex: 1.这使得它填充所有可用空间.下一个孩子View是您的图标持有者.您可以将其设置为您想要的任何值(在此案例50).

export default class App extends Component {
  render() {
    return (
      
        
          
            // AutoComplete component goes here
          
          
           // Icon goes here
          
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100
  },
  formRow: {
    flexDirection: 'row',
    height: 50,
  },
  formItem: {
    flex: 1,
    backgroundColor: 'dodgerblue',
  },
  formIcon: {
    width: 50,
    backgroundColor: 'greenyellow',
  },
});