0

当我键入时，标题中的图像不断闪烁。请问如何在右上角或accessoryRight中停止这种闪烁？我正在使用 UI Kitten UI 库中的这个TopNavigation 组件。我认为这不正常，根本不应该发生。我一定是做错了什么。

https://youtu.be/fQppQn-RzeE（我如何嵌入这个？编辑，提前谢谢你！）

闪烁发生在导航标题的标题和右侧。

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

我尝试过的事情：

  • 由于 Header 的结果依赖于navigation props，我尝试使用useStateand 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>
4

1 回答 1

2

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

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

然后在你的道具而不是内联要求中使用变量：

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} />
  ),[]);
于 2021-05-29T16:29:51.673 回答