Question

我使用 react-native-paper 在 react-native 中尝试了 Theming 的第一步，但第一步不起作用。

AppViewContainer

export default compose(

  lifecycle({
    componentDidMount() {
      if (Platform.OS === 'android') {
        // eslint-disable-next-line no-unused-expressions
        UIManager.setLayoutAnimationEnabledExperimental &&
        UIManager.setLayoutAnimationEnabledExperimental(true);
      }
    },
  }),
)(AppView);

AppView.js

export default function App() {
  return(
    <PaperProvider theme={theme}>  
      <Navigator  onNavigationStateChange={() => {  }} uriPrefix="/app" />
    </PaperProvider>
  )
}

导航器

export default createAppContainer( createSwitchNavigator({
  AuthLoading: LoadingScreen,
  App: AppStack,
  Tabs: TabNavigator,
  Auth: AuthStack,
},
{
  initialRouteName: 'AuthLoading',
}
));

下一步我的主屏幕即将到来

this.props.theme //undefined

似乎道具没有通过反应导航。我如何告诉导航器循环它？

很多感谢

Answer 1

我现在的解决方案是：

App.tsx - 包括 redux

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { AppearanceProvider } from 'react-native-appearance';
import { Provider } from 'react-redux';
import { Main } from './src/main';
import store from "./src/store"; //redux store

export default function App() {
  return (
    <Provider store={store}> 
      <SafeAreaProvider>
        <AppearanceProvider>
          <Main />
        </AppearanceProvider>
      </SafeAreaProvider>
    </Provider>
  );
}

Main.tsx

import React from 'react';
import {
  Provider as PaperProvider,
  DefaultTheme,
  DarkTheme,
} from 'react-native-paper';
import { I18nManager } from 'react-native';
import * as Updates from 'expo-updates';
import { useColorScheme } from 'react-native-appearance';
import { PreferencesContext } from './context/preferencesContext';
import { RootNavigator } from './rootNavigator';

...

return (

<PreferencesContext.Provider value={preferences}>
  <PaperProvider
    theme={
      theme === 'light'
        ? {
            ...DefaultTheme,
            colors: { ...DefaultTheme.colors, 
              primary: 'red',
              background: '#f8f8f8',
              listbg: '#ffffff',
              bg: require('../assets/splash.png') 
            },
          }
        : {
            ...DarkTheme,
            colors: { ...DarkTheme.colors, 
              primary: '#1ba1f2',
              listbg: 'rgba(255, 255, 255, 0.1)',
              bg: require('../assets/splash.png')  
            },
          }
        }
      >
        <RootNavigator />
      </PaperProvider>
    </PreferencesContext.Provider>
  );
};

现在您可以在每个具有全局定义值的功能组件中使用“主题”并在暗模式和亮模式之间切换。

const theme = useTheme(); // imported from react-native-paper

在 github 上找到的完整示例：https://github.com/Trancever/twitterClone

如果此信息有用，请投票。谢谢。

通过反应导航从 App.js 反应原生道具到屏幕不起作用

1 个答案: