GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Erro no React Native

Tags: #<Tag:0x00007f4ab745bab0>
Estou desenvolvendo um aplicativo em React que ao ativar um botão ele faz chamada para uma nova janela. Consegui o programa do botão, mas não estou conseguindo renderizar.
Não estou sabendo identificar o erro. 
Uso o expo para renderizar no smartphone, agradeço desde já pela ajuda...
Segue o código com o App e o módulo do botão.
Orientações para desenvolver o aplicativo são bem vindas

    import { StatusBar } from 'expo-status-bar'
    import React from 'react'
    import { StyleSheet, Text, View } from 'react-native'
    import ReactDOM from 'react-dom';
    import Pushpull from './buttons';

    export default function App() {
      return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <StatusBar style="auto" />
        </View>
      )
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
      }
    })


    <div> import() Pushpull 
          <Pushpull></Pushpull>
    </div>


Programa com o botão

    import React from 'react';

    import { StyleSheet, Button, View, SafeAreaView, Text, Alert } from 'react-native';

    const Separator = () => (

      <View style={styles.separator} />

    );

    const Pushpull = () => (

      <SafeAreaView style={styles.container}>

        <View>

          <Text style={styles.title}>

            The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone.

          </Text>

          <Button

            title="Press me"

            onPress={() => Alert.alert('Simple Button pressed')}

          />

        </View>

        <Separator />

        <View>

          <Text style={styles.title}>

            Adjust the color in a way that looks standard on each platform. On  iOS, the color prop controls the color of the text. On Android, the color adjusts the background color of the button.

          </Text>

          <Button

            title="Press me"

            color="#f194ff"

            onPress={() => Alert.alert('Button with adjusted color pressed')}

          />

        </View>

        <Separator />

        <View>

          <Text style={styles.title}>

            All interaction for the component are disabled.

          </Text>

          <Button

            title="Press me"

            disabled

            onPress={() => Alert.alert('Cannot press this one')}

          />

        </View>

        <Separator />

        <View>

          <Text style={styles.title}>

            This layout strategy lets the title define the width of the button.

          </Text>

          <View style={styles.fixToText}>

            <Button

              title="Left button"

              onPress={() => Alert.alert('Left button pressed')}

            />

            <Button

              title="Right button"

              onPress={() => Alert.alert('Right button pressed')}

            />

          </View>

        </View>

      </SafeAreaView>

    );

    const styles = StyleSheet.create({

      container: {

        flex: 1,

        justifyContent: 'center',

        marginHorizontal: 16,

      },

      title: {

        textAlign: 'center',

        marginVertical: 8,

      },

      fixToText: {

        flexDirection: 'row',

        justifyContent: 'space-between',

      },

      separator: {

        marginVertical: 8,

        borderBottomColor: '#737373',

        borderBottomWidth: StyleSheet.hairlineWidth,

      },

    });

    export default Pushpull;
//