Jestem nowy w flexbox i nie jestem w stanie wyprodukować przycisku pełnej szerokości reagującego natywnie. Próbowałem to rozgryźć przez ponad jeden dzień i przeczytałem każdy powiązany artykuł/post w Internecie bezskutecznie.Przycisk pełnej szerokości z flex-boxem w trybie natywnego reagowania
Chciałbym mieć dwa elementy TextInput
, które rozciągają się na całą szerokość ekranu, z przyciskiem pod nimi, który obejmuje również całą szerokość ekranu. Elementy TextInput
są na całej szerokości ekranu, ale wydaje się, że domyślnie jest to symulator Androida, na którym działam.
Oto mój kod:
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;
ktoś wie co trzeba zrobić, aby uzyskać TouchableHighlight
aby objąć całą szerokość ekranu?
Wielkie dzięki za odpowiedź. Niestety nie działa to z wersją natywną w wersji 0.15.0 działającą w systemie Android 6.0 (a symulator Androida jest uszkodzony na udostępnionym przez ciebie placu zabaw). Skopiowałem twój dokładny plik, a przycisk wyświetla się tak, jak był wcześniej (jest to tylko szerokość jego tekstu). Czy to jest błąd React? – Bibs
Może spróbuj tego: var windowWidth = Dimensions.get ('window'). Width; Zaktualizował również przykład wdrożenia tego. –
To działało! Wielkie dzięki. – Bibs