Nessa aula vamos criar as páginas de jogo, começando pelo jogo solo.

1- Vamos começar criando uma pasta chamada “PlayAlone”, dentro da pasta “Pages”. Dentro da pasta PlayAlone, vamos criar os arquivos index.jsx e styles.js.

2- Dentro da página index.jsx, vamos criar a estrutura básica:

import React  from "react";

export default function PlayAlone() {
  return
}

3- No arquivo styles.js, vamos criar a estrutura (Container e Title)

import styled from "styled-components";
import { RFValue } from "react-native-responsive-fontsize";
import { getStatusBarHeight } from "react-native-iphone-x-helper";

export const Container = styled.View`
  flex: 1;
  padding-top: ${getStatusBarHeight() + RFValue(50)}px;
  background-color: ${({ theme }) => theme.colors.background};
`;

export const Title = styled.Text`
  font-size: ${RFValue(32)}px;
  font-family: ${({ theme }) => theme.fonts.bold};
  color: ${({ theme }) => theme.colors.white};
  text-align: center;
`;

4- Agora já podemos inserir esses elementos dentro do return, no arquivo index.jsx, na função PlayAlone:

return (
    <Container>
      <Title>Bomb Game Solo</Title>
    </Container>
);

5- No arquivo index.jsx, da pasta Routes, vamos criar essa rota para que possamos acessar essa página através de navegação:

export default function Routes() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen name="Start" component={Start} />
        <Stack.Screen name="Rules" component={Rules} />
        <Stack.Screen name="PlayAlone" component={PlayAlone} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}