Como você pode flutuar: direto no React Native?

Eu tenho um elemento que eu quero flutuar direito, por exemplo

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

Como pode Textser flutuado / alinhado à direita? Além disso, por que Textocupam todo o espaço do View, em vez de apenas o espaço para "Olá"?

por que o texto ocupa todo o espaço da tela, em vez de apenas o espaço para "Olá"?

Como o Viewcontainer é flexível e, por padrão, possui flexDirection: 'column'e alignItems: 'stretch', o que significa que seus filhos devem ser esticados para preencher sua largura.

(Observe que, de acordo com os documentos , todos os componentes do React Native são display: 'flex'por padrão e display: 'inline'nem sequer existem. Dessa forma, o comportamento padrão de a Textdentro de um Viewno React Native difere do comportamento padrão de spandentro de um divna Web; neste último caso, a extensão não preencheria a largura do divporque a spané um elemento embutido por padrão. Não existe esse conceito no React Native.)

Como o texto pode ser flutuado / alinhado à direita?

A floatpropriedade não existe no React Native, mas existem muitas opções disponíveis (com comportamentos ligeiramente diferentes) que permitem alinhar corretamente o texto. Aqui estão os que eu consigo pensar:

1. Use textAlign: 'right'no Textelemento

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(Essa abordagem não altera o fato de que ela Textpreenche toda a largura da View; apenas alinha o texto com a direita Text.)

2. Use alignSelf: 'flex-end'noText

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

Isso reduz o Textelemento ao tamanho necessário para manter seu conteúdo e o coloca no final da direção da cruz (a direção horizontal, por padrão) do View.

3. Use alignItems: 'flex-end'noView

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

Isso é equivalente à configuração alignSelf: 'flex-end'em todos os Viewfilhos.

4. Use flexDirection: 'row'e justifyContent: 'flex-end'noView

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'define a direção principal do layout como horizontal em vez de vertical; justifyContenté como alignItems, mas controla o alinhamento na direção principal, em vez da direção transversal.

5. Use flexDirection: 'row'no Viewe marginLeft: 'auto'noText

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

Essa abordagem é demonstrada, no contexto da Web e do CSS real, em https://stackoverflow.com/a/34063808/1709587 .

6. Use position: 'absolute'e right: 0no Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Como no CSS real, isso leva o Text"fora de fluxo", o que significa que seus irmãos poderão se sobrepor e sua posição vertical estará na parte superior da Viewpor padrão (embora você possa definir explicitamente uma distância da parte superior da Viewusando a toppropriedade style).

Naturalmente, qual dessas várias abordagens você deseja usar - e se a escolha entre elas importa mesmo - dependerá de suas circunstâncias precisas.

Você pode especificar diretamente o alinhamento do item, por exemplo:

textright: {    
  alignSelf: 'flex-end',  
},

Para mim, definir alignItemsum pai fez o truque, como:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});

Você não deve usar carros alegóricos no React Native. O React Native utiliza o flexbox para lidar com tudo isso.

No seu caso, você provavelmente desejará que o contêiner tenha um atributo

justifyContent: 'flex-end'

E sobre o texto ocupando todo o espaço, novamente, você precisa dar uma olhada no seu contêiner.

Aqui está um link para um ótimo guia sobre o flexbox: Um guia completo para o Flexbox

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: Se você deseja mover horizontalmente (linha) ou verticalmente (coluna)

justifyContent: a direção que você deseja mover.

Você pode flutuar: direito em reagir nativo usando flex:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

para obter mais detalhes: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction