我正在 React Native 中创建一个表单，并希望使我的TextInputs 为屏幕宽度的 80%。
使用 HTML 和普通 CSS，这将很简单：
input {
display: block;
width: 80%;
margin: auto;
}
除了 React Native 不支持display属性、百分比宽度或自动边距。
那我应该怎么做呢？在 React Native 的问题跟踪器中有一些关于这个问题的讨论，但所提出的解决方案看起来像讨厌的黑客。
从 React Native 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>
);
这应该符合您的需求：
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>
);
}
});
如果您只是想让输入相对于屏幕宽度，一个简单的方法是使用 Dimensions：
// 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);
在您的样式表中，只需输入：
width: '80%';
代替：
width: 80%;
继续编码........ :)
您还可以尝试支持单向应用程序百分比的react-native-extended-stylesheet：
import EStyleSheet from 'react-native-extended-stylesheet';
const styles = EStyleSheet.create({
column: {
width: '80%',
height: '50%',
marginLeft: '10%'
}
});