React Native에서 상위 화면 너비의 80%를 표시합니다.

React Native에서 상위 화면 너비의 80%를 표시합니다.

이 폼을 .TextInput80%로 하다

HTML 및 일반 CSS에서는 다음과 같이 간단합니다.

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

React Native를 .display속 、 분 、 폭 、 여 、 는백 。

그럼 제가 대신 뭘 해야 할까요?리액트 네이티브의 문제 트래커에는 이 문제에 대한 논의가 몇 가지 있지만, 제안된 솔루션은 불쾌한 해킹처럼 보입니다.

0 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>
        );
    }
});

화면 폭에 따라 입력하려는 경우 치수를 사용하는 것이 가장 쉬운 방법입니다.

// 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 스타일시트를 사용해 볼 수도 있습니다.

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

기본적으로 플렉스 속성은 플렉스 컨테이너에 있는 모든 항목의 "총" 플렉스에 상대적인 폭입니다.따라서 모든 항목의 합계가 100이면 백분율이 있습니다.이 예에서는 같은 결과에 대해 flex 값 6과 4를 사용할 수 있으므로 FLEXible이 더 높습니다.

백분율 폭 보기를 중앙에 배치하려는 경우: 절반 폭의 스페이서를 두 개 추가합니다.이 예에서는 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',
     },
});

가장 쉬운 방법은 너비를 뷰에 적용하는 것입니다.

width: '80%'

이게 내가 해결책을 얻은 방법이야.심플하고 달콤합니다.화면 밀도에 의존하지 않음

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

코드의 사이즈에 따옴표를 붙이면 됩니다.이를 사용하여 폭, 높이 백분율을 사용할 수 있습니다.

input: {
    width: '80%'
}

언급URL : https://stackoverflow.com/questions/33939974/make-view-80-width-of-parent-in-react-native