Блог

Итак, для контекста я проделал большую работу с React, но что касается React Native, у меня очень мало опыта. Я пытаюсь создать приложение, которое использует навигацию React для перехода со страницы на страницу. Это также ново для меня, но я читал, что это хорошо для собственных приложений.

Это настройка навигатора стека. Каждый компонент — это просто простая функция, возвращающая его имя в текстовом теге, который находится внутри тега представления.

 return (
  <View>
    <Text>Component</Text>
  </View>
)
 

Это App.js с помощью навигатора стека

 import 'react-native-gesture-handler';
import React from 'react';
import { ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Main from './src/components/main';
import Nav from './src/components/nav';
import Home from './src/pages/home';
import Group from './src/pages/group.js';
import Profile from './src/pages/profile';
import Calendar from './src/pages/calendar';
import Event from './src/pages/event';
import CreateEvent from './src/pages/create-event';
import CreateGroup from './src/pages/create-group';
import JoinGroup from './src/pages/join-group';

const Stack = createStackNavigator();

export default function App() {
  return (
    <ScrollView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Group" component={Group} />
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Calendar" component={Calendar} />
          <Stack.Screen name="Event" component={Event} />
          <Stack.Screen name="Create Event" component={CreateEvent} />
          <Stack.Screen name="Create Group" component={CreateGroup} />
          <Stack.Screen name="Join Group" component={JoinGroup} />
        </Stack.Navigator>
      </NavigationContainer>
    </ScrollView>
  )
}
 

По умолчанию используется домашняя страница, чего я и хочу. Тем не менее, я попытался реализовать кнопку, которая при нажатии будет переходить на другую страницу («группа»). Кнопка не отображается. Текст не отображается, если я реализую текстовый тег. Компонент определенно импортируется правильно, поскольку показанный журнал консоли выводится на консоль.

 import React from 'react';
export default function Home(props) {
  return (
    <View style={{ flex: 1 }}>
      <Button style={{flex: 1, width: 200, height: 200, backgroundColor: 'black'}} title="Group" onPress={() => props.navigation.navigate('Group')}/>
    </View>
  )
}
 

Вот как выглядит домашняя страница при загрузке приложения.
Домашняя страница

Я много раз пытался разобраться в этом. Я нашел несколько источников, предлагающих попробовать {flex: 1} для стилизации, но это не исправило ситуацию. Я пытался использовать заглавные буквы как в имени файла, так и в компоненте, без изменений.

NavigationContainer не должен находиться внутри ScrollView, вы должны поместить scrollview в компоненты ваших страниц, такие как Home, Profile Calender

 export default function App() {
  return (

      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={Home} />
          <Stack.Screen name="Group" component={Group} />
          <Stack.Screen name="Profile" component={Profile} />
          <Stack.Screen name="Calendar" component={Calendar} />
          <Stack.Screen name="Event" component={Event} />
          <Stack.Screen name="Create Event" component={CreateEvent} />
          <Stack.Screen name="Create Group" component={CreateGroup} />
          <Stack.Screen name="Join Group" component={JoinGroup} />
        </Stack.Navigator>
      </NavigationContainer>
  )
}
 

и домашний компонент

 import React from 'react';
export default function Home(props) {
  return (
<ScrollView style={{flex:1}}>
    <View style={{ flex: 1 }}>
      <Button style={{flex: 1, width: 200, height: 200, backgroundColor: 'black'}} title="Group" onPress={() => props.navigation.navigate('Group')}/>
    </View>
</ScrollView>
  )
}