在“反应本机”中查看父级宽度的80%

我正在创建一个反应本机的形式，并希望使我的 TextInputs 的80% 的屏幕宽度。

使用 HTML 和普通的 CSS，这将是简单明了的:

input {
display: block;
width: 80%;
margin: auto;
}

除了 React National 不支持 display属性、百分比宽度或自动边距。

那我该怎么办呢？反应原住民的问题追踪器中有 对这个问题的一些讨论，但是提出的解决方案看起来像是令人讨厌的黑客攻击。

233985 次浏览
小开

如果你只是想让输入与屏幕宽度相关，一个简单的方法就是使用维度:

// De structure Dimensions from React
var React = require('react-native');
var {
...
Dimensions
} = React;


// Store width in variable
var width = Dimensions.get('window').width;


// Use width variable in style declaration
<TextInput style=\{\{ width: width * .8 }} />

我已经建立了一个工作项目 给你。代码也在下面。

Https://rnplay.org/apps/rqqpcq

'use strict';


var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Dimensions
} = React;


var width = Dimensions.get('window').width;


var SampleApp = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style=\{\{fontSize:22}}>Percentage Width In React Native</Text>
<View style=\{\{marginTop:100, flexDirection: 'row',justifyContent: 'center'}}>
<TextInput style=\{\{backgroundColor: '#dddddd', height: 60, width: width*.8 }} />
</View>
</View>
);
}
});


var styles = StyleSheet.create({
container: {
flex: 1,
marginTop:100
},


});


AppRegistry.registerComponent('SampleApp', () => SampleApp);
小开

这应该符合你的需要:

var yourComponent = React.createClass({
render: function () {
return (
<View style=\{\{flex:1, flexDirection:'column', justifyContent:'center'}}>
<View style=\{\{flexDirection:'row'}}>
<TextInput style=\{\{flex:0.8, borderWidth:1, height:20}}></TextInput>
<View style=\{\{flex:0.2}}></View> // spacer
</View>
</View>
);
}
});
小开

你也可以试试支持单向应用百分比的 本机扩展样式表:

import EStyleSheet from 'react-native-extended-stylesheet';


const styles = EStyleSheet.create({
column: {
width: '80%',
height: '50%',
marginLeft: '10%'
}
});
小开

我使用的技术有百分比的父宽度是增加一个额外的间隔视图结合一些柔性盒。这并不适用于所有的场景，但它可能非常有帮助。

我们开始吧:

class PercentageWidth extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.percentageWidthView}>
{/* Some content */}
</View>


<View style={styles.spacer}
</View>
</View>
);
}
}


const styles = StyleSheet.create({
container: {
flexDirection: 'row'
},


percentageWidthView: {
flex: 60
},


spacer: {
flex: 40
}
});

基本上，flex 属性是 Flex 容器中所有项目相对于“总”flex 的宽度。因此，如果所有项目的总和为100，您有一个百分比。在这个例子中，我可以使用 flex 值6和4来获得相同的结果，所以它更像 FLEXible。

如果要居中显示百分比宽度视图，请添加两个半宽的间隔符。在这个例子中是2-6-2。

当然，添加额外的视图并不是世界上最好的事情，但在一个真实的应用程序中，我可以想象间隔将包含不同的内容。

小开

这就是我得到解决方案的方法。简单而甜蜜。与屏幕密度无关:

export default class AwesomeProject extends Component {
constructor(props){
super(props);
this.state = {text: ""}
}
render() {
return (
<View
style=\{\{
flex: 1,
backgroundColor: "#ececec",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}
>
<View style=\{\{ padding: 10, flexDirection: "row" }}>
<TextInput
style=\{\{ flex: 0.8, height: 40, borderWidth: 1 }}
onChangeText={text => this.setState({ text })}
placeholder="Text 1"
value={this.state.text}
/>
</View>
<View style=\{\{ padding: 10, flexDirection: "row" }}>
<TextInput
style=\{\{ flex: 0.8, height: 40, borderWidth: 1 }}
onChangeText={text => this.setState({ text })}
placeholder="Text 2"
value={this.state.text}
/>
</View>
<View style=\{\{ padding: 10, flexDirection: "row" }}>
<Button
onPress={onButtonPress}
title="Press Me"
accessibilityLabel="See an Information"
/>
</View>
</View>
);
}
}
小开
最佳答案

当反应原生0.42 height:和 width:接受百分比。

在样式表中使用 width: 80%就可以了。

  • 截图

  • 实例
    子女身高/宽度与父母身高的比例

  • 密码

    import React from 'react';
import { Text, View, StyleSheet } from 'react-native';


const width_proportion = '80%';
const height_proportion = '40%';


const styles = StyleSheet.create({
screen: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#5A9BD4',
},
box: {
width: width_proportion,
height: height_proportion,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#B8D2EC',
},
text: {
fontSize: 18,
},
});


export default () => (
<View style={styles.screen}>
<View style={styles.box}>
<Text style={styles.text}>
{width_proportion} of width{'\n'}
{height_proportion} of height
</Text>
</View>
</View>
);
小开

在样式表中，简单地写:

width: '80%';

而不是:

width: 80%;

继续编码... ... :)

小开

我有一个更新的解决方案(2019年底) ，以获得80% 的宽度的父 和 Hook 一起响应它的工作，即使设备旋转。

在这个例子中，你可以使用 Dimensions.get('window').width来获得设备宽度，你可以看到如何响应地做到这一点

import React, { useEffect, useState } from 'react';
import { Dimensions , View , Text , StyleSheet  } from 'react-native';


export default const AwesomeProject() => {
const [screenData, setScreenData] = useState(Dimensions.get('window').width);


useEffect(() => {
const onChange = () => {
setScreenData(Dimensions.get('window').width);
};
Dimensions.addEventListener('change', onChange);


return () => {Dimensions.removeEventListener('change', onChange);};
});


return (
<View style={[styles.container, { width: screenData * 0.8 }]}>
<Text> I'mAwesome </Text>
</View>
);
}


const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#eee',
},
});
小开

最简单的实现方法是将宽度应用于视图。

width: '80%'
小开

只需在代码中的大小周围添加引号。使用这种方法，您可以使用宽度、高度的百分比

input: {
width: '80%'
}

提交答案