admin管理员组

文章数量:1025347

Current behavior

Frequent navigation to the page causes style abnormalities.

RootStackNavigator:

const RootStack = createNativeStackNavigator<any>();
const RootStackNavigator: React.FC = () => {
  const headerBack = useCallback(() => <HeaderBackIcon />, []);
  return (
    <RootStack.Navigator
      initialRouteName={'BottomTab'}
      screenOptions={{
        headerBackVisible: false,
        animation: 'slide_from_right',
        presentation: 'card',
        animationDuration: 100,
        headerTitleAlign: 'center',
        orientation: 'portrait',
        headerLeft: headerBack,
      }}
    >
      <RootStack.Screen
        name="BottomTab"
        component={BottomTabNavigator}
        options={{
          headerShown: false,
        }}
      />
      <RootStack.Group>
        <RootStack.Screen
          name="Login"
          component={LoginScreen}
          options={{
            headerShadowVisible: false,
          }}
        />
      </RootStack.Group>
    </RootStack.Navigator>
  );
};

BottomTabNavigator:

const MainTab = createBottomTabNavigator<any>();
const BottomTabNavigator: React.FC = () => {
  const simpleNavigate = useSimpleNavigate();
  const handleMePress = useCallback(
    (e: any) => {
      e.preventDefault();
      simpleNavigate('Login');
    },
    [simpleNavigate],
  );
  return (
    <MainTab.Navigator
      initialRouteName={'Home'}
      screenOptions={{
        headerTitleAlign: 'center',
      }}
    >
      <MainTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <MainTab.Screen
        name="Everything"
        component={EverythingScreen}
        options={{
          tabBarLabel: 'Everything',
        }}
      />
      <MainTab.Screen
        name="Cart"
        component={CartScreen}
        options={{
          tabBarLabel: 'Bag',
        }}
      />
      <MainTab.Screen
        name="Me"
        component={MeScreen}
        options={{
          tabBarLabel: 'Me',
        }}
        listeners={{ tabPress: handleMePress }}
      />
    </MainTab.Navigator>
  );
};

LoginTab:

const LoginTab: React.FC<PropsType> = () => {
  return (
    <ScrollView
      bounces={false}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.wrapper}
      scrollEventThrottle={64}
    >
      <View style={styles.formWrapper}>
        <View
          style={{ height: 100, width: 100, backgroundColor: 'blue' }}
        ></View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    paddingBottom: 28,
  },
  formWrapper: {
    marginBottom: 13,
  },
});
export default LoginTab;

Reproduction

/@saddhu/tab-style-abnormal?platform=ios

[email protected]:Chenjiujiu/AwesomeProject.git

Environment

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^7.0.3",
    "@react-navigation/native": "^7.0.2",
    "@react-navigation/native-stack": "^7.0.2",
    "react": "18.3.1",
    "react-native": "0.76.1",
    "react-native-pager-view": "^6.5.0",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.1.0",
    "react-native-tab-view": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0",
    "@react-native-community/cli-platform-android": "15.0.0",
    "@react-native-community/cli-platform-ios": "15.0.0",
    "@react-native/babel-preset": "0.76.1",
    "@react-native/eslint-config": "0.76.1",
    "@react-native/metro-config": "0.76.1",
    "@react-native/typescript-config": "0.76.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Frequently entering the me page will display an exception after the 13th time

Current behavior

Frequent navigation to the page causes style abnormalities.

RootStackNavigator:

const RootStack = createNativeStackNavigator<any>();
const RootStackNavigator: React.FC = () => {
  const headerBack = useCallback(() => <HeaderBackIcon />, []);
  return (
    <RootStack.Navigator
      initialRouteName={'BottomTab'}
      screenOptions={{
        headerBackVisible: false,
        animation: 'slide_from_right',
        presentation: 'card',
        animationDuration: 100,
        headerTitleAlign: 'center',
        orientation: 'portrait',
        headerLeft: headerBack,
      }}
    >
      <RootStack.Screen
        name="BottomTab"
        component={BottomTabNavigator}
        options={{
          headerShown: false,
        }}
      />
      <RootStack.Group>
        <RootStack.Screen
          name="Login"
          component={LoginScreen}
          options={{
            headerShadowVisible: false,
          }}
        />
      </RootStack.Group>
    </RootStack.Navigator>
  );
};

BottomTabNavigator:

const MainTab = createBottomTabNavigator<any>();
const BottomTabNavigator: React.FC = () => {
  const simpleNavigate = useSimpleNavigate();
  const handleMePress = useCallback(
    (e: any) => {
      e.preventDefault();
      simpleNavigate('Login');
    },
    [simpleNavigate],
  );
  return (
    <MainTab.Navigator
      initialRouteName={'Home'}
      screenOptions={{
        headerTitleAlign: 'center',
      }}
    >
      <MainTab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <MainTab.Screen
        name="Everything"
        component={EverythingScreen}
        options={{
          tabBarLabel: 'Everything',
        }}
      />
      <MainTab.Screen
        name="Cart"
        component={CartScreen}
        options={{
          tabBarLabel: 'Bag',
        }}
      />
      <MainTab.Screen
        name="Me"
        component={MeScreen}
        options={{
          tabBarLabel: 'Me',
        }}
        listeners={{ tabPress: handleMePress }}
      />
    </MainTab.Navigator>
  );
};

LoginTab:

const LoginTab: React.FC<PropsType> = () => {
  return (
    <ScrollView
      bounces={false}
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.wrapper}
      scrollEventThrottle={64}
    >
      <View style={styles.formWrapper}>
        <View
          style={{ height: 100, width: 100, backgroundColor: 'blue' }}
        ></View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  wrapper: {
    paddingBottom: 28,
  },
  formWrapper: {
    marginBottom: 13,
  },
});
export default LoginTab;

Reproduction

/@saddhu/tab-style-abnormal?platform=ios

[email protected]:Chenjiujiu/AwesomeProject.git

Environment

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^7.0.3",
    "@react-navigation/native": "^7.0.2",
    "@react-navigation/native-stack": "^7.0.2",
    "react": "18.3.1",
    "react-native": "0.76.1",
    "react-native-pager-view": "^6.5.0",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^4.1.0",
    "react-native-tab-view": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0",
    "@react-native-community/cli-platform-android": "15.0.0",
    "@react-native-community/cli-platform-ios": "15.0.0",
    "@react-native/babel-preset": "0.76.1",
    "@react-native/eslint-config": "0.76.1",
    "@react-native/metro-config": "0.76.1",
    "@react-native/typescript-config": "0.76.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Frequently entering the me page will display an exception after the 13th time

本文标签： react nativeFrequent navigation to the page causes style abnormalitiesStack Overflow

版权声明：本文标题：react native - Frequent navigation to the page causes style abnormalities - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745614186a2159185.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。