反应原生样式。宽度：百分比 - 数字

Posted 2023-03-06

【中文标题】反应原生样式。宽度：百分比 - 数字

【英文标题】：React native styling. width: percentage - number

【发布时间】：2017-10-05 05:09:50

【问题描述】：

我想做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.log 335 当它 console.logs inputContainerWidth 但 <autocomplete> 的宽度仍然是 100%。

【问题讨论】：

你为什么不用flexbox？

@ViktorSeč 就我所知，Flexbox 没有办法从全宽中移除 50 个像素。

【参考方案1】：

我同意 Viktor 的观点，你应该可以使用 Flex Box 实现这一点。

这是我整理的：https://snack.expo.io/B1jDKOhyb

您将 formRow 的 flexDirection 设置为 row，然后将第一个孩子（自动完成组件的持有人 View 设置为 flex: 1。这使它填满了所有可用空间。下一个孩子 @987654326 @ 是您的图标持有者。您可以将其设置为您想要的任何值（在本例中为 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',
  ,
);

【讨论】：

这很干净。看起来像我想要的，在 expo 上查看演示 :) 我回家后会尝试并标记为答案。谢谢！

【参考方案2】：

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

import  Dimensions  from 'react-native';

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

export default MyComponent;

【讨论】：

@NavedKhan 太棒了，很高兴听到它对你有用。

如果您需要从窗口高度以外的高度减去，则此方法无效。

【参考方案3】：

你可以在不计算宽度的情况下做到这一点。将marginHorizontal: 50 与width:100 或flex:1 一起使用。

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

【讨论】：

谢谢，有道理。

【参考方案4】：

你可以简单地做'calc(100% - 50px)'

【讨论】：

你确定这适用于 React Native，还是你只是指使用 React 的 Web 的 CSS 样式？

react-native 不支持。