React-Navigation实现React Native多独立视图栈导航问题咨询

问题原因 #

• 内层独立导航的List、Modal组件没有接收到父组件传入的title、children、modal等参数，渲染内容为空
• 内层独立NavigationContainer没有包裹ThemeProvider，styled组件无法获取主题配置，导致背景样式失效、组件视觉上“消失”
• List、Modal组件定义在Card组件内部，每次Card重渲染都会重新生成组件实例，触发不必要的卸载重挂载，容易出现渲染异常
• 普通View组件不存在onModal自定义事件，跳转逻辑无法被触发

修复后的Card.js代码 #

import React, { FC }from 'react';
import styled from '@emotion/native';
import Text from './Text';
import setTheme from '@lib/theme';
import { TouchableOpacity } from 'react-native';

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { ThemeProvider } from '@emotion/react';


const Container = styled.View`
    background: ${({ theme }: any) => theme.colors.white };
    border-radius: 6px;
    flex-direction: column;
    padding: 6px 12px;
    margin: 6px 12px;
    width: 320px;
`;

// 改成可点击组件支持触发跳转
const Content = styled.TouchableOpacity`
  align-items: center;
  flex-direction: column;
  padding-left: 6px;
`;

const Title = styled(Text)`
    font-size: 15px;
    font-weight: bold;
    color: #404040;
    line-height: 49px;
`;

const Stack = createStackNavigator();
const theme = setTheme('light');

// 把List组件移到外部，通过route接收参数
const List : FC<{route: any}> = ({ route })  =>  {
  const navigation = useNavigation();
  const { title, children, modalProps } = route.params;
  return (
    <Container {...modalProps} >
      <Title>{title}</Title>
      <Content onPress={()=>{navigation.push("modal", route.params)}}>
        {children}
      </Content>
    </Container>
)};

// 把Modal组件移到外部，通过route接收参数
const Modal : FC<{route: any}> = ({ route })  =>  {
  const { title, modal, modalProps } = route.params;
  return (
    <Container {...modalProps} >
      <Title>{title}</Title>
      <Content disabled={true}>
        {modal}
      </Content>
    </Container>
)};

const Card: FC<Props> = ({ children, modal, title, ...props }) => {
  return (
    <ThemeProvider theme={theme}>
      <NavigationContainer independent={true}>
        <Stack.Navigator initialRouteName={"list"} screenOptions={{ headerShown: false }}>
          <Stack.Screen 
            name="list" 
            component={List} 
            initialParams={{
              title,
              children,
              modal,
              modalProps: props
            }}
          />
          <Stack.Screen name="modal" component={Modal} />
        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  );
}


type Props = {
  title?: string;
  children?: React.ReactNode;
  modal?: React.ReactNode;
};

export default Card;

适配优化建议 #

如果要适配不同屏幕尺寸，可以通过useWindowDimensions动态获取屏幕宽度，调整Container的固定宽度为自适应比例值，实现不同平板、桌面尺寸的适配效果。

内容的提问来源于stack exchange，提问作者Monero Jeanniton