Кнопка полной ширины с гибкой коробкой в реактивной

Я новичок в 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 всю ширину экрана?

Ответы

Ответ 1

Это можно сделать, установив свойство flex: 1 в родительском элементе TouchableHighlight, а затем назначив свойство flexDirection: row для элемента 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);

Ответ 2

Я пришел сюда, ища тот же вопрос. Проведя дальнейшие эксперименты, я нашел самый простой способ использовать alignSelf: 'stretch'. Это заставляет отдельный элемент принимать всю ширину, например,

 button: {
    alignSelf: 'stretch'
 }

Ответ Nader, конечно, работает, но это выглядит правильно, используя Flexbox.

Ответ 3

Теперь есть предопределенный компонент Button. Даже если вы используете текст, вам нужно обратить внимание на ширину просмотра:

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

Ответ 4

Давайте использовать источник ниже, который помогает установить ширину и высоту кнопки. Здесь необходимо указать параметры ширины и высоты кнопки в макете вида.

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

Ответ 5

Удивительно, мне нравится, alignSelf: 'stretch', - это путь.

Ответ 6

Nader Dabit У меня есть вопрос для вашего решения. Если я добавлю flex: 1 к основному виду, он будет занимать всю высоту экрана, поскольку по умолчанию используется столбец flex-direction:. Я пытался сделать что-то еще, создавая View с строкой flexDirection и с flex: 1 для дочерних элементов, но элементы исчезают, и я не знаю, что делать. Любое предложение? Спасибо!

Кнопка полной ширины с гибкой коробкой в ​​реактивной