header 中的顶部导航项在键入时不断闪烁

Question

header 中的图像在我打字时不断闪烁。请问如何停止右上角或accessoryRight的闪烁？我正在使用来自 UI Kitten UI 库的 TopNavigation component。我认为这不正常，根本不应该发生。我一定是做错了什么。

https://youtu.be/fQppQn-RzeE（如何嵌入？编者，先谢过了！）

标题和导航右侧出现闪烁 Header。

我为 TopNavigation 制作了一个单独的组件，然后在各自的屏幕中调用它。

我尝试过的事情：

由于 Header 的结果依赖于 navigation props，我尝试使用 useState 和 useEffect（以 navProps 作为依赖项）来保存道具而不是直接从 props 读取，但无济于事
直接将 jsx 添加到 TopNavigation 的 accessoryLeft/Right 和 title 选项中

欢迎任何意见，不胜感激！

顶部导航：

const NavHeader = ({ navProps }) => {
  const navigateBack = () => {
    navProps.navigation.goBack();
  };

  const [type, setType] = React.useState('');

  React.useEffect(() => {
    setType(navProps.type);
  }, [navProps]);

  const BackIcon = props => <Icon {...props} name='arrow-back' />;

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack} />
  );

  const renderBrand = () => (
    <View style={styles.titleContainer}>
      <Image source={require('../../assets/images/brand.png')} />
    </View>
  );

  const renderLogo = () => (
    <Image source={require('../../assets/images/logo.png')} />
  );

  return (
    <TopNavigation
      style={styles.topNav}
      accessoryLeft={navProps.backNav && BackAction}
      accessoryRight={
        type === 'register' || type === 'profile' ? renderLogo : null
      }
      title={type === 'landing' || type === 'auth' ? renderBrand : null}
      alignment='center'
    />
  );
};

导入示例：

<KeyboardAvoidingView
      style={styles.kbContainer}
      behavior={Platform.OS === 'ios' ? 'padding' : null}
    >
  <SafeAreaView style={styles.parentContainer}>
    <NavHeader navProps={navProps} /> // Imported custom Header component here
    <ScrollView>
      {other content}
    </ScrollView>
  </SafeAreaView>
</KeyboardAvoidingView>

Answer 1

也许只需要一次图像而不是每次渲染都可能会有所帮助。尝试将其添加到文件顶部（而不是在组件函数内）

const brandImage = require('../../assets/images/brand.png');
const logoImage = require('../../assets/images/logo.png');

然后在你的 props 而不是 inline require 中使用变量：

const renderBrand = () => (
    <View style={styles.titleContainer}>
      <Image source={brandImage} />
    </View>
  );

  const renderLogo = () => (
    <Image source={logoImage} />
  );

编辑:

既然这行不通，也许利用 useMemo 来记忆显示图像的组件？

类似


const renderBrand = useMemo(() => (
    <View style={styles.titleContainer}>
      <Image source={brandImage} />
    </View>
  ),[]);

  const renderLogo = useMemo(() => (
    <Image source={logoImage} />
  ),[]);

header 中的顶部导航项在键入时不断闪烁

Top navigation items in header constantly flickers when typing

javascript

react-native

react-navigation

react-native-ui-kitten