Đặt chế độ xem 80% chiều rộng của trang gốc trong React Native

Tôi đang tạo một biểu mẫu trong React Native và muốn TextInputchiếm 80% chiều rộng màn hình.

Với HTML và CSS thông thường, điều này sẽ đơn giản:

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

Ngoại trừ việc React Native không hỗ trợ thuộc displaytính, độ rộng phần trăm hoặc lề tự động.

Vậy tôi nên làm gì thay thế? Có một số cuộc thảo luận về vấn đề này trong trình theo dõi vấn đề của React Native, nhưng các giải pháp được đề xuất có vẻ giống như những vụ hack khó chịu.

Kể từ React Native 0,42 height:và width:chấp nhận tỷ lệ phần trăm.

Sử dụng width: 80%trong các bảng định kiểu của bạn và nó chỉ hoạt động.

• Ảnh chụp màn hình
  
  

• Ví dụ trực tiếp
  Chiều rộng / Chiều cao của con theo tỷ lệ của cha mẹ
  
  

• Mã

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

Điều đó sẽ phù hợp với nhu cầu của bạn:

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

Nếu bạn chỉ đơn giản là muốn làm cho đầu vào tương đối với chiều rộng màn hình, một cách dễ dàng sẽ là sử dụng Kích thước:

// 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 }} />

Tôi đã thiết lập một dự án làm việc ở đây . Mã cũng ở dưới đây.

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

Trong StyleSheet của bạn, chỉ cần đặt:

width: '80%';

thay vì:

width: 80%;

Tiếp tục mã hóa ........ :)

Bạn cũng có thể thử biểu định kiểu phản ứng gốc-mở rộng hỗ trợ tỷ lệ phần trăm cho các ứng dụng hướng đơn:

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

const styles = EStyleSheet.create({
  column: {
    width: '80%',
    height: '50%',
    marginLeft: '10%'
  }
});

Kỹ thuật tôi sử dụng để có chiều rộng phần trăm của phụ huynh là thêm một khung nhìn thêm đệm kết hợp với một số flexbox. Điều này sẽ không áp dụng cho tất cả các trường hợp nhưng nó có thể rất hữu ích.

Vì vậy, chúng ta bắt đầu:

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

Về cơ bản thuộc tính flex là chiều rộng liên quan đến "tổng" flex của tất cả các mục trong vùng chứa flex. Vì vậy, nếu tất cả các mục tổng bằng 100, bạn có một tỷ lệ phần trăm. Trong ví dụ, tôi có thể đã sử dụng giá trị flex 6 & 4 cho cùng một kết quả, vì vậy nó thậm chí còn FLEXible hơn.

Nếu bạn muốn căn giữa chế độ xem theo phần trăm chiều rộng: thêm hai dấu cách với một nửa chiều rộng. Vì vậy, trong ví dụ, nó sẽ là 2-6-2.

Tất nhiên việc thêm các khung nhìn bổ sung không phải là điều đẹp nhất trên thế giới, nhưng trong một ứng dụng thế giới thực, tôi có thể hình dung khoảng đệm sẽ chứa nội dung khác nhau.

Tôi có một giải pháp cập nhật (cuối năm 2019), để có được 80% chiều rộng của phụ huynh Đáp ứng với Hooks, nó hoạt động ngay cả khi thiết bị xoay.

Bạn có thể sử dụng Dimensions.get('window').widthđể lấy Chiều rộng thiết bị trong ví dụ này, bạn có thể thấy cách bạn có thể làm điều đó một cách Đáp ứng

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

Đây là cách tôi có giải pháp. Đơn giản và ngọt ngào. Không phụ thuộc vào mật độ màn hình:

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

Cách dễ nhất để đạt được là áp dụng chiều rộng để xem.

width: '80%'