Блог

Я все еще новичок в программировании на основе react, но к настоящему времени почти завершил свой проект. один из моих последних шагов-использовать тематику для Android в этом проекте. поскольку текущие документы навигации react (5?) основаны только на функциях, мне действительно трудно понять эту функциональность. поэтому я создал примерный проект, чтобы изучить и, надеюсь, понять это. вот и все: App.js

 import 'react-native-gesture-handler';
import React from 'react';
import home from './home';
import screen2 from './Screen2';

import { NavigationContainer, DefaultTheme, DarkTheme  } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';

const Stack = createStackNavigator();

export default function App() {
const scheme = useColorScheme();

const MyDarkTheme = {
  dark: true,
  colors: {
    primary: "#9933FF",
    background: "#000000",
    card: "#000000",
    text: "#ffffff",
    border: "#000028",
    notification: "#9933FF",
    green: "#00ff00"
  }
}

  return (
    <>
    <AppearanceProvider>
        <NavigationContainer theme={scheme === "dark" ? MyDarkTheme : DefaultTheme}>
            <Stack.Navigator mode="modal">
                <Stack.Screen name="Home" component={home}  />
                <Stack.Screen name="screen2" component={screen2}  />
            </Stack.Navigator>
        </NavigationContainer>
    </AppearanceProvider>
    </>
  );
};

 

home.js

 import { useTheme } from '@react-navigation/native';
import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { StyleSheet, View, Text, Button } from 'react-native';

function Home() {
  const { colors } = useTheme();
  const navigation = useNavigation()

  return (
    <>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{color: colors.text}}>this is the Home Screen</Text>
        <Button
        title="Go To Screen 2"
        onPress={() => navigation.navigate("screen2")}
        />
    </View>
    </>
  );
};

export default Home;
 

Screen2.js

  import { ThemeContext , ThemeColors, useTheme, useNavigation } from 'react-navigation';
 import React, { Component, createContext } from 'react';
 import { StyleSheet, View, Text, Button} from 'react-native';

 class Screen2 extends Component {

  static contextType = ThemeContext;

  render() {
    const { colors } = this.context
   return (
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
         <View style={{backgroundColor: 'gray', padding: 10}}>
            <Text style={{color: this.context.colors.text}}>this is screen 2</Text> 
         </View>
     </View>
   );
  }
 };
 
 export default Screen2;
 

я просто не могу заставить эти цвета.текст работать в screen2.js то
же самое с навигацией.перейдите

я подумал, что, возможно, мне придется использовать навигацию из «react-navigation», которая, по моему мнению, должна быть react-navi v4 в проектах на основе классов и «@react-navigation/native » (v5?) в компонентах на основе функций, но я просто не могу этого понять.. сейчас я чувствую себя немного потерянным, это сводит меня с ума! я даже подумываю о том, чтобы преобразовать весь мой проект в функциональный, а не классовый, но это было бы большой работой, я имею в виду действительно много! и я также должен использовать свои собственные наборы цветов, а не только стандартные цвета, предоставляемые родными темами react… так куда же нам теперь идти? :/