全宽按钮w / flex-box在反应原 [英] Full width button w/ flex-box in react-native
问题描述
我是flexbox的新手，无法在react-native中产生全宽按钮。我一直试图找出自己的一天，已经阅读每个相关的文章/在互联网上的帖子没有效果。
我想有两个 TextInput 元素跨越屏幕的整个宽度，也跨越屏幕的整个宽度。 TextInput 元素是跨越屏幕的整个宽度，但这似乎是默认情况下在我运行的Android模拟器。 p>
这是我的代码：
var MyModule = React.createClass b $ b 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>提交< / Text>
< / TouchableHighlight>
; / View>
< / View>
}，
buttonPressed：function（）{
console.log（'button was pressed！
}
}）;
var paddingLeft = 15;
var styles = StyleSheet.create（{
inputsContainer：{
//故意空白，因为我已经尝试了一切&I;我无知
}，
fullWidthButton：{
//故意空白，因为我已经尝试过一切，我无知
}，
输入：{
paddingLeft：paddingLeft ，
height：40，
borderColor：'black'，
backgroundColor：'white'，
}，
container：{
flex：
backgroundColor：'＃f0f0f0'，
alignItems：'stretch'，
}，
headline：{
}
}）;
module.exports = Onboarding;
任何人都知道我需要做什么来获得 TouchableHighlight
你可以通过设置flex：1属性来实现这一点TouchableHighlight的父元素，然后为TouchableHighlight元素分配一个flexDirection：row属性：
< View style = {styles。 inputsContainer}>
< TouchableHighlight style = {styles.fullWidthButton} onPress = {this.buttonPressed}>
< Text style = {styles.fullWidthButtonText}>提交< / 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} >提交< / 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'
}，
输入：{
paddingLeft：paddingLeft，
height ：40，
borderColor：'black'，
backgroundColor：'white'，
}，
container：{
flex：1，
backgroundColor： '＃f0f0f0'，
alignItems：'stretch'，
}，
headline：{
}
}）;
AppRegistry.registerComponent（'MyModule'，（）=> MyModule）;
I'm new to flexbox and am unable to produce a full width button in react-native. I've been trying to figure this out myself for over a day and have read every related article / post on the internet to no avail.
I would like to have two TextInput elements that span the entire width of the screen, with a button below them that also spans the full width of the screen. The TextInput elements are spanning the full width of the screen, but this appears to be by default in the Android simulator I'm running.
Here's my code:
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;
Anyone know what I need to do to get the TouchableHighlight to span the full width of the screen?
You can achieve this by setting a flex:1 property on the parent element of the TouchableHighlight, then assigning a flexDirection:row property to the TouchableHighlight element:
<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'
}
I've set up a full working example here. Also, the full code is below.
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);
这篇关于全宽按钮w / flex-box在反应原的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
