Defina a barra de navegação superior do applet

1. Efeito mostra

2. O método de substituir o botão traseiro no lado esquerdo

2.1 Cobertura

Essa configuração é implementada pelo aplicativo, uma vez definido, todos os applets no aplicativo serão implementados para esse efeito.

2.2 Método de configuração do iOS

Basta colocar uma imagem PNG no projeto e nomear -a fin_btn_navi_back , Verifique se a imagem pode ser acessada corretamente através do MainBundle.

2.3 Método de configuração do Android

Consulte o arquivo XML de Footwowing, crie e ajuste o estilo da imagem e nomeie -o fin_applet_nav_back.xml , coloque -o no res/drawable Diretório do projeto.

Observe que a imagem nome do arquivo não pode ser alterada , caso contrário, não substituirá a imagem no SDK.

<vector xmlns:android= "http://schemas.android.com/apk/res/android" 
        android:width= "24dp" 
        android:height= "24dp" 
        android:viewportWidth= "24.0" 
        android:viewportHeight= "24.0" >
    <path
        android:fillColor= "#FF000000" 
        android:pathData= "M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>

3. Método de personalização da interface do usuário do botão de volta em casa na barra de navegação

3.1 Cobertura

Essa configuração é implementada pelo aplicativo, uma vez definido, todos os applets no aplicativo serão implementados para esse efeito.

As condições atuais para o botão de volta ao lar estão (sujeitas a ambas as pessoas): "

1. O estilo de barra de navegação padrão (não personalizado) é usuário. "
2. Não é a página inicial ou a página do TabBar (conforme definido em App.json). "
3. é a página inferior da pilha da página. " O applet pode ligar para HideHomeButton () em Onsshow para esconder o botão de volta manualmente.

3.2 Método de configuração do iOS

FATNavHomeConfig *navHomeConfig = [[FATNavHomeConfig alloc] init];
uiConfig.navHomeConfig = navHomeConfig;

Os seguintes atributos de configuração são suportados.

@interface FATNavHomeConfig : NSObject

/**
 The width of the Back Home button
 */
@property (nonatomic, assign) CGFloat width;

/**
 Height of Back Home button
 */
@property (nonatomic, assign) CGFloat height;

/**
 The left margin of the Back Home button, the default value is 10
 */
@property (nonatomic, assign) CGFloat leftMargin;

/**
 The radius of the home button's rounded corners, the default value is 5.
 */
@property (nonatomic, assign) CGFloat cornerRadius;

/**
 Return to the home button border width, the default value is 0.8
 */
@property (nonatomic, assign) CGFloat borderWidth;

/**
 Light color return home button image object, if not passed, will use the default icon
 (dark mode)
*/
@property (nonatomic, strong) UIImage *lightImage;

/**
 Image object of the dark return home button, if not passed, the default icon will be used
 (bright mode)
*/
@property (nonatomic, strong) UIImage *darkImage;

/**
 Back to the home button border light color
 (Dark mode)
 */
@property (nonatomic, strong) UIColor *borderLightColor;

/**
 Back to the home button border dark color
 (bright mode)
 */
@property (nonatomic, strong) UIColor *borderDarkColor;

/**
 Back to the home button background light color
 (bright mode)
 */
@property (nonatomic, strong) UIColor *bgLightColor;

/**
 Back to the home button's background dark color
 (Dark mode)
 */
@property (nonatomic, strong) UIColor *bgDarkColor;

@end

3.3 Método de configuração do Android

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo:

UIConfig.NavHomeConfig navHomeConfig = new UIConfig.NavHomeConfig();
uiConfig.setNavHomeConfig(navHomeConfig);

Os seguintes atributos de configuração são suportados:

public static class NavHomeConfig {
    /**
     * Navigation bar back to the home button light-colored icon, if not passed, will use the default icon
     */
    public int lightImage = R.drawable.miniapps_home_light;
    /**
     * Navigation bar back to the home button light-colored icon, if not passed, will use the default icon
     */
    public int darkImage = R.drawable.miniapps_home_dark;

    /**
     * Return home button width, default 44
     */
    public float width = 44;

    /**
     * Return to home button height, default 32
     */
    public float height = 32;

    /**
     * The left margin of the Back to Home button, default 7
     */
    public float leftMargin = 7;

    /**
     * Return home button border radius, default 5
     */
    public float cornerRadius = 5;

    /**
     * Return to home button border width, default 1
     */
    public float borderWidth = 1;

    /**
     * Back to home button light border color, default 0X80FFFFFF
     */
    public int borderLightColor = 0x80ffffff;

    /**
     * Return home button dark border color, default 0X26000000
     */
    public int borderDarkColor = 0x26000000;

    /**
     * Return home button light background, default 0x33000000
     */
    public int bgLightColor = 0x33000000;

    /**
     * Return home button dark background, default 0x33000000
     */
    public int bgDarkColor = 0x80ffffff;
}

4. Método de substituição do estilo de título

4.1 Cobertura

Essa configuração é implementada pelo aplicativo, uma vez definido, todos os applets no aplicativo serão implementados para esse efeito.

Essa configuração permite ajustar a fonte, o tamanho da fonte e o positivo do título.

4.2 Método de configuração do iOS

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo.

// Navigation bar title text style
[FATClient sharedClient].uiConfig.navigationTitleTextAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:18.0f];

4.3 Método de configuração do Android

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo.

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Navigation bar title text style
uiConfig.setNavigationBarTitleTextAppearance(R.style.TextAppearance_AppCompat);
// Gravity of the navigation bar title relative to the parent control
uiConfig.setNavigationBarTitleTextLayoutGravity(Gravity.CENTER);

5. Como remover a animação em segundo plano quando o botão traseiro é pressionado na barra de navegação

5.1 Cobertura

Essa configuração é implementada pelo aplicativo, uma vez definido, todos os applets no aplicativo serão implementados para esse efeito.

5.2 Método de configuração do iOS

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo.

None, iOS does not have this setting item

5.3 Método de configuração do Android

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo.

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to clear the background of the navigation buttons in the navigation bar
uiConfig.setClearNavigationBarNavButtonBackground(true);

6. A maneira de esconder a barra de navegação geral

6.1 Cobertura

A configuração é definida pelo aplicativo e cada applet exibe efeitos diferentes de acordo com sua própria configuração.

6.2 Método de configuração

No applet app.json, altere a configuração da janela global da janela

{
   "window" :{
     "navigationStyle" :  "hide" 
  }
}

Depois de concluir as configurações, a barra de navegação e a cápsula correta de atualização serão ocultas

7. Quando a barra de navegação é o estilo padrão, como posso exibir o botão de volta na página inicial também?

7.1 Cobertura

Essa configuração é implementada pelo aplicativo, uma vez definido, todos os applets no aplicativo serão implementados para esse efeito.

7.2 Método de configuração do iOS

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo:

None, iOS does not have this setting item

7.3 Método de configuração do Android

Ao inicializar o SDK, ele é configurado via UIConfig , Do seguinte modo:

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether the back button is always displayed when the navigation bar is the default navigation bar
uiConfig.setAlwaysShowBackInDefaultNavigationBar(false);

8. Applet-Configurações relacionadas

8.1 API da barra de navegação

Name	Descrição da função
pz.showNavigationBarLoading	Mostrar animação de carregamento da barra de navegação na página atual
pz.setNavigationBarTitle	Defina dinamicamente o título da página atual
pz.setNavigationBarColor	Definir a cor da barra de navegação da página
pz.hideNavigationBarLoading	Ocultar a animação de carregamento da barra de navegação na página atual

8.2 Configuração global app.json

Veja [Configuração global] para obter detalhes

Properties	Type	Default	Descrição
navigationBarBackgroundColor	HexColor（Hexadecimal color values）	#000000	Cor de fundo da barra de navegação, como #000000
navigationBarTextStyle	String	white	Cor do cabeçalho da barra de navegação, atualmente suporta apenas preto / branco
navigationBarTitleText	String		Conteúdo do texto do título da barra de navegação, o número de palavras não deve ser muito
navigationStyle	String	default	Estilo da barra de navegação, apenas os seguintes valores são suportados: 1. Padrão (estilo padrão), 2. Personalize a barra de navegação, mantendo apenas a parte superior direita), 3. oculte a barra de navegação e a cápsula superior direita)
navigationBarHideCloseButton	Boolean	false	Ocultar o botão de fechamento da cápsula
navigationBarHideMoreButton	Boolean	false	Ocultar o botão do menu da cápsula

8.3 Configuração da página

Consulte Configuração da página para obter detalhes

Properties	Type	Default	Descrição
navigationBarBackgroundColor	HexColor	#000000	Cor de fundo da barra de navegação, como #000000
navigationBarTextStyle	string	white	Cor do cabeçalho da barra de navegação, suportada apenas em preto / branco
navigationBarTitleText	string		Conteúdo do texto do título da barra de navegação
navigationStyle	string	default	Estilo da barra de navegação, apenas os seguintes valores são suportados: 1. Padrão (estilo padrão), 2. Personalize a barra de navegação, mantendo apenas a parte superior direita), 3. oculte a barra de navegação e a cápsula superior direita)