我是新的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);
