[javascript] React Native에서 부모 너비의 80 %보기

Program / 글쓴이

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',
     },
});