css – 全宽度按钮w / flex-box在反应本机

我是新的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跨越屏幕的整个宽度？

解决方法

您可以通过在TouchableHighlight的父元素上设置flex：1属性,然后将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'
  }

我已经设置了一个完整的工作示例here.另外,完整的代码如下.

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
  },color: 'white'
  },headline: {
  }
});



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

css – 全宽度按钮w / flex-box在反应本机

解决方法

猜你在找的CSS相关文章