Làm cho chế độ xem 80% chiều rộng của phụ huynh trong React Native

Question

Tôi đang tạo biểu mẫu trong React Native và muốn làm cho độ rộng của màn hình là TextInput s.

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

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

Ngoại trừ việc Phản ứng Native không hỗ trợ bên lề display tài sản, chiều rộng phần trăm, hoặc tự động.

Vì vậy, tôi nên làm gì? Có some discussion of this problem trong bộ 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ư các hacks khó chịu.

Answer 1

Nếu bạn chỉ đơn giản là tìm cách để làm cho đầu vào so với chiều rộng màn hình, một cách dễ dàng sẽ được 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 here. 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); 

Answer 2

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

Answer 3

Bạn cũng có thể thử react-native-extended-stylesheet hỗ trợ tỷ lệ phần trăm cho các ứng dụng đơn định hướng:

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

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

Answer 4

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 spa phụ xem cer 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 kịch bản nhưng nó có thể rất hữu ích.

Vì vậy, ở đây chúng tôi đi:

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 tài sản flex là tương đối rộng với "tổng" flex của tất cả các mặt hàng trong container flex. Vì vậy, nếu tất cả các mục tổng hợp đến 100 bạn có một tỷ lệ phần trăm. Trong ví dụ tôi có thể đã sử dụng các giá trị flex 6 & 4 cho cùng một kết quả, vì vậy nó thậm chí còn linh hoạt hơn.

Nếu bạn muốn căn giữa chế độ xem chiều rộng phần trăm: thêm hai miếng đệm 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 lượt xem bổ sung không phải là điều đẹp nhất trên thế giới, nhưng trong ứng dụng thế giới thực, tôi có thể hình ảnh miếng đệm sẽ chứa nội dung khác nhau.

Answer 5

Đây là cách tôi nhận 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> 
    ); 
    } 
} 

Answer 6

Tính đến Phản ứng Native 0,42 height: và width: chấp nhận tỷ lệ phần trăm.

• dụ làm việc tại hội chợ triển lãm Snack:
  Child Width/Height as Proportion of Parent

• Mã trong trường hợp ví dụ sẽ biến mất.

  import React, { Component } from 'react'; 
  import { Text, View, StyleSheet } from 'react-native'; 
  
  const width = '80%'; 
  const height = '40%'; 
  
  export default class App extends Component { 
      render() { 
       return (
        <View style={styles.screen}> 
         <View style={styles.box}> 
          <Text style={styles.text}> 
           {width} of width{'\n'} 
           {height} of height 
          </Text> 
         </View> 
        </View> 
       ); 
      } 
  } 
  
  const styles = StyleSheet.create({ 
      screen: { 
       flex: 1, 
       alignItems: 'center', 
       justifyContent: 'center', 
       backgroundColor: '#7AC36A', 
      }, 
      box: { 
       width, 
       height, 
       alignItems: 'center', 
       justifyContent: 'center', 
       backgroundColor: '#F3D1B0', 
      }, 
      text: { 
       fontSize: 18, 
      }, 
  });