React Native에서 양식을 만들고 TextInput
있으며 화면 너비의 80 % 를 만들고 싶습니다 .
HTML과 일반 CSS를 사용하면 간단합니다.
input {
display: block;
width: 80%;
margin: auto;
}
React Native는 display
속성, 백분율 너비 또는 자동 여백을 지원하지 않습니다 .
그래서 대신 무엇을해야합니까? 거기에 이 문제의 논의 원주민의 이슈 트래커 반응에서,하지만 제안 된 솔루션은 불쾌한 해킹처럼 보인다.
답변
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);
답변
StyleSheet에 다음을 입력하십시오.
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%'
}
});
답변
부모의 너비를 백분율로 지정하는 데 사용하는 기술은 일부 flexbox와 함께 추가 스페이서 뷰를 추가하는 것입니다. 모든 시나리오에 적용되는 것은 아니지만 매우 유용 할 수 있습니다.
그래서 우리는 간다 :
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이면 백분율이 있습니다. 이 예에서는 동일한 결과에 대해 플렉스 값 6 및 4를 사용할 수 있으므로 훨씬 더 유연합니다.
백분율 너비보기를 중앙에 배치하려면 너비가 절반 인 스페이서 두 개를 추가합니다. 따라서 예제에서는 2-6-2가됩니다.
물론 추가 뷰를 추가하는 것이 세상에서 가장 좋은 것은 아니지만 실제 앱에서는 스페이서에 다른 콘텐츠가 포함될 수 있습니다.
답변
업데이트 된 솔루션 (2019 년 말)이 있는데, 후크를 사용 하여 부모의 80 % 너비를 반응 적으로 얻기 위해 장치가 회전하더라도 작동합니다.
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',
},
});