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

Question

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

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

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

    let Location = (props) => {
      let locationInputElement

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

      let inputContainerWidth

      return (
        <View style={styles.formItem}>
          <View
            onLayout={(event) => {
              inputContainerWidth = event.nativeEvent.layout.width
              console.log(inputContainerWidth)
            }}

    <Autocomplete
              data={props.autocompleteResults.predictions}...
 style={{
            borderRadius: 8,
            backgroundColor: 'red',
            alignSelf: 'stretch',
            paddingLeft: 10,
            position: 'relative',
            ...styles.label,
            ...styles.labelHeight,
            width: inputContainerWidth - 50
          }}
        />
      </View>
    </View>
  )
}

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

Answer 1

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

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

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.formRow}>
          <View style={styles.formItem}>
            // AutoComplete component goes here
          </View>
          <View style={styles.formIcon}>
           // Icon goes here
          </View>
        </View>
      </View>
    );
  }
}

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

Answer 2

这可以通过使用 Dimensions 轻松解决。

import { Dimensions } from 'react-native';

const MyComponent = () => {
  return <Text style={{height: Dimensions.get('window').height - 100}}></Text>
};

export default MyComponent;