Preciso de um text 'Cadastre' totalmente à esquerda e um text 'Sobre' totalmente à direita, mas ao colocar marginRight: 100, por exemplo, todo o meu container é modificado. Como faço para colocar os texts nesses lugares?
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Image,
Dimensions,
TouchableOpacity
} from 'react-native';
import {
Container
} from 'native-base';
import Images from '../imgs';
export default class Splash extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Image
key = {Images.background}
source = {Images.background}
style = {styles.backgroundStyle}
resizeMode = 'stretch'
/>
<Container style={styles.transparentView}>
<View style={styles.logoViewStyle}>
<Image
key = {Images.logo}
source = {Images.logo}
resizeMode = 'contain'
style = {styles.logoStyle}
/>
</View>
<View >
<Text style={styles.acessar}>Acessar com</Text>
</View>
<View style = {styles.viewSocialStyle}>
<TouchableOpacity>
{/* Ícone do Facebook */}
<Image
key = {Images.facebookbranco}
source = {Images.facebookbranco}
resizeMode = 'contain'
style = {styles.iconStyle}
/>
</TouchableOpacity>
</View>
<View style={styles.viewRodape}>
<Text style={styles.rodape}>Cadastre</Text>
<Text style={styles.rodape}>Sobre</Text>
</View>
</Container>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
backgroundStyle: {
flex: 1,
position: 'relative'
},
transparentView: {
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'center',
position: 'absolute'
},
logoViewStyle: {
justifyContent: 'center',
alignItems: 'center',
width: 250
},
logoStyle: {
height: 100,
width: 100,
},
acessar: {
color: '#fff',
marginTop: 40,
fontSize: 16,
},
iconStyle: {
width: 50,
height: 50,
marginBottom: 10
},
viewSocialStyle: {
width: 250,
height: 100,
justifyContent: 'flex-end',
alignItems: 'center'
},
rodape: {
color: '#fff',
fontSize: 20,
marginTop: 100,
},
viewRodape: {
flexDirection: 'row',
marginTop: 100,
},
});