React Native Mdulo 2 Props State Style Height

React Native Módulo 2 Props, State, Style, Height e Width

Introdução • Nos exemplos a seguir, todos os códigos devem ser colocados no arquivo App. js • Para cada exemplo deve ser criado um novo projeto: • react-native init nomeprojeto

Props • São os atributos de cada componente • O exemplo a seguir exibe na tela uma imagem que está na Internet • Utilizou-se o componente Image • As seguinte props foram alteradas: • source: endereço da imagem • style: estilo • Obs: • o comando let do Java. Script cria variáveis locais

import React, { Component } from 'react'; import { App. Registry, Image } from 'react-native'; export default class Exibe. Imagem extends Component { render() { let pic = { uri: 'http: //ronepage. com. br/figuras/eu_sozinho_taua. JPG' }; return ( <Image source={pic} style={{width: 193, height: 110}}/> ); } } App. Registry. register. Component('Awesome. Project', () => Exibe. Imagem);

Criando um novo componente

Criando um novo componente • Um componente é definido por uma classe que extends Componet • Útil para definir comonentes com características em comum

import React, { Component } from 'react'; import { App. Registry, View, Text} from 'react-native'; export default class Show. Componente extends Component{ class Meu. Texto extends Component { render() { return ( <View style={{align. Items: 'center', top: 50}}> <View style={{ align. Items: 'center' }}> <Meu. Texto name= 'Primeiro texto'/> <Meu. Texto name= 'Segundo'/> <Text> {this. props. name}</Text> <Meu. Texto name= 'Terceiro'/> </View> ); } } Continua -->

Criando um novo componente • O novo componente foi definido pela classe Meu. Texto • Meu. Texto é composto por uma View com estilo predefinido, um Text com a props nome configurável • A classe Show. Componete utiliza Meu. Texto • A props name do componente Meu. Texto recebe o valor que será exibido na tela • this refere-se ao próprio componente

State

State • Equivalente a props, mas mudam com o tempo • state pode conter várias variáveis • Suas variáveis devem ser mudadas pelo métodos set. State() • Após uma mudançã de state, o método render() é chamado novamente

import React, { Component } from 'react'; render() { import { View, Text } from 'react-native'; if (!this. state. is. Showing. Text) { return null; class Blink extends Component { } component. Did. Mount(){ return( set. Interval(()=> ( <Text> {this. props. text} </Text> this. set. State(previous. State => ( ); { is. Showing. Text: !previous. State. is. Showing. Text } )) } } ), 1000); export default class Blink. App extends Component { } render() { return ( state = { is. Showing. Text: true }; <View> <Blink text= 'Texto piscando'/> <Blink text= 'Este também'/> </View> ); Continua --> } }

state • component. Did. Mount() --> Chamado após acriação da tela • set. Interval() --> cria um timer executado periodicamente • this. set. State --> seta a o state do component, o qual possui a variável is. Showing. Text

Style

Style • Define a configuração/formatação de cada componente • Os valores são definidos em um array • Cada formatação é definida por um style-name: value • Style-name --> semelhante ao CSS • O exemplo a seguir cria um array chamado styles, composto por vários array de styles

import React, { Component } from 'react'; import { View, Text, Style. Sheet } from 'react-native'; const styles = Style. Sheet. create({ big. Blue: { color: 'blue', font. Weight: 'bold', font. Size: 30, }, red: { color: 'red', } }); export default class Lots. Of. Styles extends Component { render() { return ( <View> <Text style={styles. red}>Apenas vermelho</Text> <Text style={styles. big. Blue}>Apenas azul</Text> <Text style={[styles. big. Blue, styles. red]}>Azul e vermelho</Text> <Text style={[styles. red, styles. big. Blue]}>Vermelho e azul</Text> </View> ); } }

Style. Sheet • Style. Sheet: componente que cria um array de styles • const styles = Style. Sheet. create({. . . }); --> cria um vetor de styles • Cada style também é um vetor big. Blue: { color: 'blue', font. Weight: 'bold', font. Size: 30, }, • Mudando o style de um componente <Text style={styles. red}>Apenas vermelho</Text> • Styles podem ser passados em cascata • O último sobrescreve os anteriores <Text style={[styles. big. Blue, styles. red]}>big. Blue, then red</Text>

Height and Width

Height and Width • • Determinam altura e largura dos componentes, respectivamente Valores dados em pixels ou em porcentage (ex: width: '50%') No exemplo a seguir, height e width estão fixos Height e width podem assumir o valor auto em figuras e caixas de texto --> a dimensão se ajusta de acordo com o conteúdo • Obs: as cores podem ser obtidas em https: //facebook. github. io/react-native/docs/colors

import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class Fixed. Dimensions. Basics extends Component { render(){ return ( <View> <View style={{width: 50, height: 50, background. Color: 'powderblue'}}/> <View style={{width: 100, height: 100, background. Color: 'skyblue'}}/> <View style={{width: 150, height: 150, background. Color: 'steelblue'}}/> </View> ); } }

Style flex • Um componente com flex: 1 ocupa toda a região disponível dentro de seu componente pai • Atenção: o componente pai também deve ter fex: 1 • flex: 0 --> o componente precisa da definição de height e width • A primeira View possui flex = 1, a segunda flex = 2 e a terceira flex = 3 (1+1+3=6) • A primeira ocupa 1/6 da tela • A segunda ocupa 2/6 da tela • A terceira ocupa 3/6 da tela • Veja exemplo a seguir

import React, { Component } from 'react'; import { View, Text } from 'react-native'; export default class Fixed. Dimensions. Basics extends Component { render(){ return ( <View style={{flex: 1}}> <View style={{flex: 0, background. Color: 'powderblue'}}/> <View style={{flex: 1, background. Color: 'skyblue'}}/> <View style={{flex: 2, height: 150, background. Color: 'steelblue'}}/> </View> ); } }