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

98

React Native에서 양식을 만들고 TextInput있으며 화면 너비의 80 % 를 만들고 싶습니다 .

HTML과 일반 CSS를 사용하면 간단합니다.

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

React Native는 display속성, 백분율 너비 또는 자동 여백을 지원하지 않습니다 .

그래서 대신 무엇을해야합니까? 거기에 이 문제의 논의 원주민의 이슈 트래커 반응에서,하지만 제안 된 솔루션은 불쾌한 해킹처럼 보인다.

javascript  css  reactjs  react-native 
— 마크 아메리
소스
1
react-native사용하는 flex요소의 크기 및 위치에 대한. 확실하지 않지만 flex-basis필요한 것이있을 수 있습니다 : 이것 과 이것
— alix
1
그리고이 문제 에 따르면 같은 flex: 0.8일을 할 수 있습니다.
— alix

답변:

84

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>
);
— 골리 저
소스
88

귀하의 요구에 맞아야합니다.

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>
        );
    }
});
— 네 시우
소스
17
다만 <보기 스타일 = {{폭 : '75 % ', borderWidth : 1}}> </ 전망>
— user3044484
41

화면 너비에 상대적인 입력을 만들려는 경우 쉬운 방법은 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);
— Nader Dabit
소스
6
는 기본 문서가 첫 페이지에 치수 패키지를 언급해야한다 반작용 -이 ... 저를 깜짝 놀라게하지 않습니다
— AA 카림에게
매우 귀중한 답변입니다. 치수는 실제로 매우 유용합니다. 참고 : "차원은 즉시 사용할 수 있지만 (예 : 장치 회전으로 인해) 변경 될 수 있으므로 이러한 상수에 의존하는 모든 렌더링 논리 또는 스타일은 값을 캐시하는 대신 (예 : 스타일 시트에서 값을 설정하는 대신 인라인 스타일). "
— 필
가로를 지원하고 이러한 레이아웃 변경을 수동으로 처리하지 않는 경우 Dimensions를 사용하면 화면 회전 후 레이아웃이 깨집니다.
— ratsimihah
13

단일 방향 앱에 ​​대한 백분율을 지원하는 react-native-extended-stylesheet 를 사용해 볼 수도 있습니다 .

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

const styles = EStyleSheet.create({
  column: {
    width: '80%',
    height: '50%',
    marginLeft: '10%'
  }
});
— 활력
소스
5

부모의 너비를 백분율로 지정하는 데 사용하는 기술은 일부 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가됩니다.

물론 추가 뷰를 추가하는 것이 세상에서 가장 좋은 것은 아니지만 실제 앱에서는 스페이서에 다른 콘텐츠가 포함될 수 있습니다.

— dsdeur
소스
스페이서에 다른 내용이 포함될 것이라고 상상할 수 있습니까? 왜? 스페이서가 필러 html 인 많은 예를 생각할 수 있습니다.
— AlxVallejo
1

업데이트 된 솔루션 (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',
     },
});
— 샤얀 모 가담
소스
0

이것이 내가 해결책을 얻은 방법입니다. 간단하고 달콤합니다. 화면 밀도와 무관 :

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>
    );
  }
}
— 사가르 수리
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.