web-dev-qa-db-ja.com

React Nativeで親の80％幅を表示する

私はReact Nativeでフォームを作成しています、そして私のTextInputsをスクリーン幅の80％にしたいです。

HTMLと通常のCSSでは、これは簡単です。

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

React Nativeがdisplayプロパティ、パーセント幅、または自動マージンをサポートしていないことを除いて。

それで、私は代わりに何をすべきですか？ React Nativeのissue trackerには この問題についての議論もあります がありますが、提案された解決策は厄介なハックのようです。

javascriptcssreactjsreact-native
74
Mark Amery

それはあなたのニーズに合うはずです：

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

React Native 0.42からheight:とwidth:はパーセントを受け入れます。

react native percentage height/width example

  • 実例
    親の比率としての子の幅/高さ

  • コード

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

単に画面の幅を基準にして入力する場合は、簡単に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);
33
Nader Dabit

片方向のアプリのパーセンテージをサポートする react-native-extended-stylesheet を試すこともできます。

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

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

あなたのStyleSheetに、単に置くだけで：

width: '80%';

の代わりに：

width: 80%;

コーディングを続けて........ :)

12
Krishna Raj Salim

私が親のパーセンテージ幅を持つために使うテクニックは、いくつかの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つ追加します。したがって、この例では2-6-2になります。

もちろん、余分なビューを追加することは、世界で最も素晴らしいことではありませんが、現実の世界では、スペーサーに異なるコンテンツが含まれることをイメージできます。

5
dsdeur

これが私が解決策を得た方法です。シンプルでスウィート。スクリーン密度に依存しない

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