Question

我想做width: 100% - 50所以我可以在它的右侧添加一个50宽的图标。

我已width: 100% - 20%使用react-native-extended-styles工作，但我不明白为什么这有用，因为你可以width: '80%'。我无法让width: 100% - 50工作。有办法吗？

尝试使用onLayout事件来获取容器宽度，然后将容器宽度的<autocomplete>设置为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

您将formRow的flexDirection设置为row，然后将自动完成组件的第一个孩子（持有人View设置为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

这可以通过使用“尺寸标注”轻松解决。

import { Dimensions } from 'react-native';

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

export default MyComponent;

Answer 3

你可以不用计算宽度就可以做到。将marginHorizontal: 50与width:100或flex:1一起使用。

您的代码无效，因为它已呈现，然后inputContainerWidth已更新。为了使它工作，应该有另一个新的inputContainerWidth渲染。所以你不能使用无状态组件。将Location更改为常规组件，并将inputContainerWidth添加到州。

反应原生风格。 width：百分比 - 数字

3 个答案: