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