CSS 反应原生样式。宽度：百分比 - 数字
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43826624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React native styling. width: percentage - number
提问by BeniaminoBaggins
I want to do width: 100% - 50so I can add an icon which is 50 wide on the right hand side of it.
我想这样做width: 100% - 50，我可以在它的右侧添加一个 50 宽的图标。
I have got width: 100% - 20%working by using react-native-extended-stylesbut I don't see why that is useful because you can do width: '80%'. I cannot get width: 100% - 50working. Is there a way?
我已经width: 100% - 20%通过使用react-native-extended-styles开始工作，但我不明白为什么这很有用，因为你可以做width: '80%'. 我无法width: 100% - 50工作。有办法吗？
Trying to use the onLayoutevent to get the container width, then set the <autocomplete>to 100% - 50of the container width but it isn't working.
尝试使用该onLayout事件获取容器宽度，然后设置容器宽度的<autocomplete>to100% - 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>
)
}
It does console.log 335when it console.logs inputContainerWidthbut the width of the <autocomplete>is 100% still.
它在 console.logs335时执行 console.loginputContainerWidth但宽度<autocomplete>仍然是 100%。
采纳答案by Mike
I'd agree with Viktor, you should be able to achieve this using Flex Box.
我同意 Viktor 的观点，您应该可以使用 Flex Box 来实现这一点。
Here's something I put together: https://snack.expo.io/B1jDKOhyb
这是我整理的内容：https: //snack.expo.io/B1jDKOhyb
You set the flexDirectionof the formRow to row, and then the first child (the holder Viewfor your AutoComplete component to flex: 1. This makes it fill all available space. The next child Viewis your icon holder. Which you can set to whatever value you want (in this case 50).
您将flexDirectionformRow 的设置为row，然后将第一个孩子（View您的 AutoComplete 组件的持有人设置为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',
},
});
回答by Meysam Izadmehr
You can do it without computing width. Use marginHorizontal: 50with width:100or flex:1.
您可以在不计算宽度的情况下做到这一点。marginHorizontal: 50与width:100或 一起使用flex:1。
Your code not working because, it's rendered then inputContainerWidthupdated. To make it work, there should be another render with new inputContainerWidth. So you can't use a stateless component. Change Locationto regular component and add inputContainerWidthto state.
您的代码不起作用，因为它已呈现然后inputContainerWidth更新。为了使它工作，应该有另一个带有 new 的渲染inputContainerWidth。所以你不能使用无状态组件。更改Location为常规组件并添加inputContainerWidth到状态。
回答by asbmin
This can easily be solved by using Dimensions.
这可以通过使用 Dimensions 轻松解决。
import { Dimensions } from 'react-native';
const MyComponent = () => {
return <Text style={{height: Dimensions.get('window').height - 100}}>
};
export default MyComponent;
