我是新的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跨越屏幕的整个宽度?
解决方法@H_301_12@
您可以通过在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);
<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);