प्रतिक्रिया-मूल में / flexbox के साथ पूर्ण चौड़ाई बटन

Question

मैं flexbox में नया हूँ और प्रतिक्रिया-मूल में पूरी चौड़ाई का बटन बनाने में असमर्थ हूँ। मैं एक दिन के लिए यह पता लगाने की कोशिश कर रहा हूं और इंटरनेट पर हर संबंधित लेख / पोस्ट को बिना किसी लाभ के पढ़ा है।

मैं दो TextInput तत्वों को रखना चाहूंगा जो स्क्रीन की पूरी चौड़ाई को फैलाते हैं, उनके नीचे एक बटन है जो स्क्रीन की पूरी चौड़ाई को फैलाता है। TextInput तत्व स्क्रीन की पूरी चौड़ाई में फैले हैं, लेकिन यह उन Android सिम्युलेटर में डिफ़ॉल्ट रूप से प्रतीत होता है जो मैं चला रहा हूं।

यहाँ मेरा कोड है:

 var MyModule = React.createClass({
render: function() {
    return (
        <View style={styles.container}>
            <View style={styles.headline}>
                <Text>Hello World</Text>
            </View>

            <View style={styles.inputsContainer}>
                <TextInput style={[styles.input]} placeholder="Email" />
                <TextInput
                    secureTextEntry={true}
                    style={[styles.input]}
                    placeholder="Password"
                />
                <TouchableHighlight
                    style={styles.fullWidthButton}
                    onPress={this.buttonPressed}
                >
                    <Text>Submit</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
},
buttonPressed: function() {
    console.log("button was pressed!");
}
});

var paddingLeft = 15;

var styles = StyleSheet.create({
inputsContainer: {
    // Intentionally blank because I've tried everything & I'm clueless
},
fullWidthButton: {
    // Intentionally blank because I've tried everything & I'm clueless
},
input: {
    paddingLeft: paddingLeft,
    height: 40,
    borderColor: "black",
    backgroundColor: "white"
},
container: {
    flex: 1,
    backgroundColor: "#f0f0f0",
    alignItems: "stretch"
},
headline: {}
});

module.exports = Onboarding;

किसी को भी पता है कि स्क्रीन की पूरी चौड़ाई के लिए TouchableHighlight प्राप्त करने के लिए मुझे क्या करने की आवश्यकता है?

reactjs react-native flexbox

52

Bibs 1 पद 2015, 05:16

Answer 1

मैं इसी सवाल की तलाश में यहां आया था। आगे प्रयोग करने के बाद, मैंने पाया है कि alignSelf: 'stretch' का उपयोग करना सबसे सरल तरीका है। यह व्यक्तिगत तत्व को पूरी चौड़ाई उपलब्ध ई.जी.

 button: {
    alignSelf: 'stretch'
 }

नादेर का जवाब बेशक काम करता है, लेकिन यह फ्लेक्सबॉक्स का उपयोग करने का सही तरीका प्रतीत होगा।

66

Findiglay 23 मार्च 2016, 13:37

Answer 2

नीचे दिए गए स्रोत का उपयोग करें जो बटन की चौड़ाई और ऊंचाई निर्धारित करने में मदद करता है। यहां आपको लेआउट में बटन की चौड़ाई और ऊंचाई पैरामीटर निर्दिष्ट करने की आवश्यकता है।

<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
   <Button
      onPress={this.buttonClickListener}
      title="Button Three"
      color="#90A4AE"
    />
</View>

2

sumit kumar pradhan 10 अगस्त 2018, 05:15

Answer 3

अब एक पूर्वनिर्धारित घटक बटन है। यदि आप पाठ का उपयोग करते हैं, तब भी आपको दृश्य चौड़ाई पर ध्यान देने की आवश्यकता है:

<View style={[{width:"100%"}]}>
    <Button
        onPress={this.closeModal}
        title="Close"
        color="#841584"
        style={[{borderRadius: 5,}]}
        hardwareAccelerated
    />
</View>

3

Roman 26 मार्च 2018, 02:29

Answer 4

आप TouchableHighlight के मूल तत्व पर एक फ्लेक्स: 1 गुण सेट करके इसे प्राप्त कर सकते हैं, फिर एक flexDirection असाइन कर सकते हैं: TouchableHighlight तत्व के लिए पंक्ति गुण:

<View style={styles.inputsContainer}>
    <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
        <Text style={styles.fullWidthButtonText}>Submit</Text>
    </TouchableHighlight>
</View>

  inputsContainer: {
    flex: 1
  },
  fullWidthButton: {
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  fullWidthButtonText: {
    fontSize:24,
    color: 'white'
  }

मैंने एक पूर्ण कार्य उदाहरण यहां स्थापित किया है। इसके अलावा, पूर्ण कोड नीचे है।

https://rnplay.org/apps/J6fnqg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
} = React;

var MyModule = React.createClass({
  render: function() {
    return <View style={styles.container}>

      <View style={styles.headline}>
        <Text>Hello World</Text>
      </View>

      <View style={styles.inputsContainer}>

        <TextInput style={[styles.input]} placeholder="Email" />
        <TextInput secureTextEntry={true} style={[styles.input]} placeholder="Password" />
        <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
          <Text style={styles.fullWidthButtonText}>Submit</Text>
        </TouchableHighlight>

      </View>
    </View>
  },
  buttonPressed: function() {
    console.log('button was pressed!');
  }
});

var paddingLeft = 15;


var styles = StyleSheet.create({
  inputsContainer: {
    flex: 1
  },
  fullWidthButton: {
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  fullWidthButtonText: {
    fontSize:24,
    color: 'white'
  },
  input: {
    paddingLeft: paddingLeft,
    height: 40,
    borderColor: 'black',
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'stretch',
  },
  headline: {
  }
});



AppRegistry.registerComponent('MyModule', () => MyModule);

25

Just_Paul 26 अगस्त 2018, 15:04

प्रतिक्रिया-मूल में / flexbox के साथ पूर्ण चौड़ाई बटन

4 जवाब

संबंधित सवाल

जुड़े हुए प्रश्न

नए सवाल

reactjs