Mudanças entre as edições de "React Native"
Ir para navegação
Ir para pesquisar
| Linha 15: | Linha 15: | ||
npm install @react-navigation/stack --save | npm install @react-navigation/stack --save | ||
npm install @react-navigation/native --save | npm install @react-navigation/native --save | ||
| + | |||
| + | <View> | ||
| + | <Text> | ||
| + | <TextInput | ||
| + | style={{height: 40}} | ||
| + | placeholder="Type here to translate!" | ||
| + | onChangeText={text => setText(text)} | ||
| + | defaultValue={text} | ||
| + | /> | ||
| + | <Text style={{padding: 10, fontSize: 42}}> | ||
| + | {text.split(' ').map((word) => word && '🍕').join(' ')} | ||
| + | </Text> | ||
| + | ==== Image ==== | ||
| + | <Image> | ||
| + | <Image | ||
| + | source={{uri: "https://reactnative.dev/docs/assets/p_cat1.png"}} | ||
| + | style={{width: 200, height: 200}} | ||
| + | /> | ||
| + | <ScrollView> | ||
| + | <TextInput> | ||
| + | ==== Button ==== | ||
| + | <Button | ||
| + | onPress={() => { | ||
| + | setIsHungry(false); | ||
| + | }} | ||
| + | disabled={!isHungry} | ||
| + | title={isHungry ? "Pour me some milk, please!" : "Thank you!"} | ||
| + | /> | ||
== Iniciar server == | == Iniciar server == | ||
Edição das 01h54min de 5 de julho de 2021
https://reactnative.dev/docs/getting-started
npm install --global expo-cli
Criar uma aplicação
expo init teste1 npm start npm run android npm run ios npm run web
Componentes
npm install @react-navigation/stack --save npm install @react-navigation/native --save
<View>
<Text>
<TextInput
style=Predefinição:Height: 40
placeholder="Type here to translate!"
onChangeText={text => setText(text)}
defaultValue={text}
/>
<Text style=Predefinição:Padding: 10, fontSize: 42>
{text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
Image
<Image>
<Image
source=Predefinição:Uri: "https://reactnative.dev/docs/assets/p cat1.png"
style=Predefinição:Width: 200, height: 200
/>
<ScrollView>
<TextInput>
Button
<Button
onPress={() => {
setIsHungry(false);
}}
disabled={!isHungry}
title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
/>
Iniciar server
Inicar o React para desenvolvimento e testes
yarn start
Bibliotecas
https://www.youtube.com/watch?v=71shcOjC_a4
