0

Implementei o BottomTabNavigation do React Navigaton em um app e tem duas tabs: home e sobre. O sobre.js possui conteúdo, mas não aparece na tela, pensei que estivesse atras de outro componente mas não está. Vi outros códigos e também está igual o meu, não estou conseguindo ver onde está o erro, poderiam me ajudar?

Esse é o App.js


import React from 'react'
import { Text, View, Image, ScrollView, TouchableOpacity, Linking } from 'react-native'
import { styles, header, boxes, footer } from './src/styles'
import ModaisFem from './src/components/ModaisFem'
import ModaisMasc from './src/components/ModaisMasc'
import { FontAwesome } from '@expo/vector-icons'
import { NavigationContainer } from '@react-navigation/native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import Icon from 'react-native-vector-icons/Entypo'

import Home from './src/pages/Home'
import Sobre from './src/pages/Sobre'

const Tab = createBottomTabNavigator()

const imgPrincipal = require('./src/images/xiaolong-wong-pdx1LH_TMJM-unsplash.jpg')
const imgPromo = require('./src/images/eduardo-pastor-sWcDEaemw14-unsplash.jpg')
const imgPromo2 = require('./src/images/tamas-pap-N7lIJLtAegc-unsplash.jpg')
const twitter = 'https://twitter.com/'
const instagram = 'https://www.instagram.com/'
const facebook = 'https://www.facebook.com/'
const pin = 'https://br.pinterest.com/'

Icon.loadFont()

export default function App () {
  return (
    <>
      <ScrollView>

        <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="Home" component={Home} />
            <Tab.Screen name="Sobre" component={Sobre} />
          </Tab.Navigator>
        </NavigationContainer>

        <View style={styles.container}>

          <TouchableOpacity>
            <Text style={styles.carrinho}>
              <Icon name="shopping-cart" size={15} color="#FFF" />  Carrinho</Text>
          </TouchableOpacity>

          <View style={header.container}><Text style={header.text}>Bazzaar</Text></View>
          <Image style={styles.principal} source={imgPrincipal} />
          <Text style={styles.secoes}>Moda Feminina</Text>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <ModaisFem></ModaisFem>
          </ScrollView>

          <Text style={styles.secoes}>Moda Masculina</Text>
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <ModaisMasc></ModaisMasc>
          </ScrollView>

          <View style={boxes.box}>
            <TouchableOpacity>
              <View style={boxes.boxImage}>
                <Image style={styles.imgPromo} source={imgPromo} />
              </View>
              <View><Text style={boxes.boxText}>Jeans de todos os estilos em promoção, aproveite!</Text></View>
            </TouchableOpacity>
            <TouchableOpacity>
              <View style={boxes.boxImage}>
                <Image style={styles.imgPromo} source={imgPromo2} />
              </View>
              <View><Text style={boxes.boxText}>Monte aqui seu look perfeito para qualquer evento!</Text></View>
            </TouchableOpacity>

          </View>

          <View style={footer.box}>
            <View style={footer.social}>
              <TouchableOpacity
                onPress={() => Linking.openURL(twitter)}>
                <Icon name="twitter-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => Linking.openURL(instagram)}>
                <Icon name="instagram-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => Linking.openURL(facebook)}>
                <Icon name="facebook-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => Linking.openURL(pin)}>
                <Icon name="pinterest-with-circle" size={50} color="#121212" />
              </TouchableOpacity>
            </View>
            <View style={footer.payment}>
              <FontAwesome name="cc-visa" size={48} color="black" />
              <FontAwesome name="cc-mastercard" size={48} color="black" />
              <FontAwesome name="cc-amex" size={48} color="black" />
              <FontAwesome name="cc-paypal" size={48} color="black" />
            </View>
          </View>

        </View>
      </ScrollView>
    </>
  )
}

Sobre.js

import React from 'react'
import { View, Text } from 'react-native'

function Sobre () {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#000' }}>
              <Text>Sobre</Text>
          </View>
  )
}

export default Sobre

E home.js

import React from 'react'
import { View, Text } from 'react-native'

function Home () {
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#000' }}>
            <Text>Home</Text>
        </View>
  )
}

export default Home

E esse meu package.json

 },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/drawer": "^6.1.3",
    "@react-navigation/native": "^6.0.2",
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "~0.13.12"
  },
3
  • Tente colocar todo o NavigationContainer para fora do ScrollView Commented 19/08/2021 às 1:29
  • Eu já tentei isso e não funciona 😞 Commented 19/08/2021 às 2:06
  • Tenta remover tudo então, e deixa apenas o NavigationContainer no return do App. Ele deveria renderizar. E se funcionar você poderia ir construindo o restante por partes até identificar o problema. Vi que você comentou também que seu código está idêntico a outros que funcionam, seria interessante colocar uma imagem do erro/mensagem exibida Commented 19/08/2021 às 9:04

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .