xboxClone

Decidi pôr em prática, por meio deste projeto, o conhecimento sobre Reactive Native que adquiri nas últimas semanas do curso de Reactive Native do DevMedia. Para tanto, estilizei quatro telas separadamente e utilizei o stack navigation da biblioteca @react-navigation/stack para fazer a conexão entre as páginas.

Telas que usei de referencia:

O resultado final terá que ser parecido com essas telas

Inicialmente, criei rotas em App.js para as telas se comunicarem.

criando rotas em App.js:

     const Stack = createStackNavigator();

      export default function App () {
        return (
          <NavigationContainer >
            <Stack.Navigator>
              <Stack.Screen name="Início" component = { TelaInicial }/>
              <Stack.Screen name="Consoles" component = { TelaConsole }/>
              <Stack.Screen name="Jogos" component = { TelaJogo }/>
              <Stack.Screen name="Nuvem" component = { TelaNuvem }/>
            </Stack.Navigator>

          </NavigationContainer>
        )
      };  

Após a estilização dos componentes (telas), criei conexões entre os cards da tela inicial e as suas respectivas telas por meio de funções implementadas nos próprios cards.

criando conexões em TelaInicial:

    <View>
      <Pressable style={styles.card} onPress = { () => { props.navigation.navigate('Consoles') } } >
        <Image source={console} style={styles.cardImage} />
        <Text style= {styles.text} >Conheça os consoles</Text>
      </Pressable>

      <Pressable style={styles.card} onPress = { () => { props.navigation.navigate('Jogos') } }>
      <Image source={halo} style={styles.cardImage} />
        <Text style= {styles.text}>Conheça os jogos</Text>
      </Pressable>

      <Pressable style={styles.card} onPress = { () => { props.navigation.navigate('Nuvem') } }>
      <Image source={xcloud} style={styles.cardImage}/>
        <Text style= {styles.text}>Conheça o xCloud</Text>
      </Pressable>
    </View>

Toda a estilização individual das telas encontra-se nos arquivos Style.js presentes na pasta telas

É possivel ver o resultado final no youtube

baixe o APK aqui.