Solución:
Puede envolver sus botones en vistas flexionadas:
import React, { Component } from 'react';
import { Button, View, StyleSheet } from 'react-native';
export default const FlexedButtons () => (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button title="Button 1"/>
</View>
<View style={styles.buttonContainer}>
<Button title="Button 2"/>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
buttonContainer: {
flex: 1,
}
});
Aquí hay un ejemplo de trabajo en Sketch: https://snack.expo.io/SyMpPSise
import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default class ButtonExample extends Component {
_onPressButton() {
alert('You tapped the button!')
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this._onPressButton}
title="Press Me"
color="#841584"
/>
</View>
<View style={styles.alternativeLayoutButtonContainer}>
<Button
onPress={this._onPressButton}
title="This looks great!"
/>
<Button
onPress={this._onPressButton}
title="OK!"
color="#841584"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
alternativeLayoutButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
<View style={styles.menuContainer}>
<TouchableOpacity onPress={() => this.pressLink('Home')}>
<View style={styles.imageTextContainer}>
<Image
source={require('./on.png')} />
<Text style={{flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20}} >Home</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.pressLink('About')}>
<View style={styles.imageTextContainer}>
<Image
source={require('./on.png')} />
<Text style={{flex:1 ,color: '#fff',fontSize: 20,marginLeft: 20}} >About</Text>
</View>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
menuContainer: {
flex: 0.52,
marginLeft: 5
},
imageTextContainer: {
marginLeft: 20,
padding: 10,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)