标签: react-navigation

我正在使用这个库https://reactnavigation.org/docs/intro/来通过react-native构建android.我可以在Android设备上进行导航,但是如何让屏幕从右侧滑入并从左侧淡入.似乎这种行为发生在iOS设备上,而不是在Android中.Android应用程序有任何动画配置吗？

请看下面的动画.这是在iOS中记录的.

我正在使用来自https://reactnavigation.org/docs/navigators/tab的 React Navigation的Tab Navigator ,当我在Tab屏幕之间切换时,我在this.props.navigation中没有获得任何导航状态.

标签导航器:

    import React, { Component } from 'react';
    import { View, Text, Image} from 'react-native';
    import DashboardTabScreen from 'FinanceBakerZ/src/components/dashboard/DashboardTabScreen';
    import { TabNavigator } from 'react-navigation';


       render() {
        console.log(this.props.navigation);   

        return (
          <View>
              <DashboardTabNavigator  />
          </View>
        );
      }



    const DashboardTabNavigator = TabNavigator({
      TODAY: {
        screen: DashboardTabScreen
      },
      THISWEEK: {
        screen: DashboardTabScreen
      }
    });

仪表板屏幕:

import React, { Component } from 'react';
import { View, Text} from 'react-native';

export default class DashboardTabScreen extends Component {
  constructor(props) …

我正在使用ReactNavigation,我想知道如何显示一个视图(这样我就可以触发数据刷新).我看到这个例子使用了不同的导航器NavigatorIOS - 是否有viewDidAppear或viewWillAppear等效？但不确定如何使用https://reactnavigation.org/.

我在导航调度上看到console.log - 但是有一些事件处理程序可以在屏幕/组件级别挂钩以了解该组件/屏幕是否在前台？我应该getStateForAction以某种方式挂钩方法吗？ https://reactnavigation.org/docs/routers/api.我不想真正创建自定义路由处理程序本身,只是为了检测视图是否进入前景/将出现,我猜我可以使用导航事件以某种方式做到这一点.

这是我的抽屉导航:

const DashboardStack = StackNavigator({
        Dashboard: {
            screen: Dashboard
        },
    }, {
        headerMode: 'screen',
    });

const DetailsformStack = StackNavigator({
    Detailsform: {
        screen: Detailsform
    },
}, {
    headerMode: 'none'
});

const OtpStack = StackNavigator({
    Otp: {
        screen: Otp,
        drawer: {
            lockMode: 'locked-closed'
        }
    },
    }, {
        headerMode: 'none'
});

const MobilenumberStack = StackNavigator({
    Mobilenumber: {
        screen: Mobilenumber
    },
}, {
    headerMode: 'none'
});

const DrawerviewStack = StackNavigator({
    Drawerview: {
        screen: Drawerview
    },
}, {
    headerMode: 'none'
});

const ExamsheetStack = StackNavigator({ …

如果不使用Redux,如何使用react导航选项卡导航器检测选项卡更改？

我知道我需要以某种方式使用onNavigationStateChange但我无法弄清楚如何更新当前视图.

export default () => <MyTabNav
    ref={(ref) => { this.nav = ref; }}
    onNavigationStateChange={(prevState, currentState) => {
        //call function on current view
    }}
/>;

我正在使用React Navigation构建抽屉,并且如果用户关闭抽屉,则想要执行一些逻辑.我没有在文档中看到任何可以让我这样做的明显内容.有人知道这样做的方法吗？

在官方react-navigationgithub 上打开了很多问题:https://github.com/react-community/react-navigation/issues但是没有人提供真正的解决方案,包括一篇帖子说"嘿伙计们,看看这个问题,很多问题":https://github.com/react-community/react-navigation/issues/691没有回答.

基本上:我有DrawerNavigator一些嵌套的StackNavigator.

export const MainNavigator = DrawerNavigator(
    {
        OrderNew: {
            screen: OrderNew,
            navigationOptions: {
                drawerLabel: DrawerLabel('New Order')
            }
        },
        Orders: {
            screen: OrderNavigator, //a StackNavigator
            navigationOptions: {
                drawerLabel: DrawerLabel('Orders')
            }
        },
        MenuNavigator: {
            screen: MenuNavigator, //a StackNavigator
            navigationOptions: {
                drawerLabel: DrawerLabel('Menu')
            }
        },
    //more screens...
    {
        initialRouteName: 'Orders',
        drawerPosition: 'right',
        contentComponent: props => <ScrollView style={{backgroundColor: 'rgba(227, 100, 29, .95)'}}><DrawerMenu state={props} /></ScrollView>,
    }
);

所以,我正在contentComponent …

我观察到Back按钮逻辑可以看到堆栈中的屏幕序列.我有一个放置在堆栈导航器中的抽屉导航器.

在堆栈顶部我有Splash画面.在仪表板上,当我按下后退按钮时,我需要启动屏幕.

进入应用程序后,如何从堆栈中删除启动画面,因此当我按下后退按钮仪表板时,它将退出应用程序,而不是转到SPLASH SCREEN.

/* @flow */

import React from "react";
import { Platform, Text } from "react-native";
import { Root } from "native-base";
import { StackNavigator, DrawerNavigator} from "react-navigation";
import Register from "./components/Register";
import Available from "./components/Available";
import Splash from "./components/splash/“;
import SideBar from "./components/sidebar";
import Discover from "./components/Discover/";
import Dashboard from "./components/Dashboard/";
import Contact from "./components/Contact"



const Drawer = DrawerNavigator(
  {
    Dashboard: { screen: Dashboard },
    Discover: { screen: Discover },
    Contact: { screen: Contact},
      },
  {
    navigationOptions: …

我试图与... react-native-keyboard-spacer一起使用react-navigation.

我目前设置topSpacing的键盘间隔的是-49这是从标签栏的高度react-navigation,但标签栏不到SafeAreaView它神奇地添加填充内容移动到不与原生UI抵触的区域.

这意味着当在iPhone X或其他类似设备上查看应用程序时,标签栏会变得比高50.

什么是获得高度的最佳方法SafeAreaView？

iOS会自动填充第一个密码字段,但不会填写第二个密码字段.如何在应用程序中自动填写密码和确认密码字段？

更新:似乎系统将注册表单视为登录表单,因此它会自动填充第一个密码字段.此外,当我导航回登录屏幕时,系统会提示我是否要在钥匙串中保存密码,这是意料之外的.

更新:我正在使用堆栈导航(屏幕:登录和注册).在我以注册形式输入姓名或电子邮件后,它会自动填写登录屏幕的密码字段和注册屏幕的第一个密码字段的强密码.有什么办法告诉系统那些是不同的形式？(就像<form>在网络编程中使用不同).

登录屏幕

export default class Login extends Component {
    Login() {

    }

    render() {
        return (
            <IndexBackground>
                <IndexBox>
                    <IndexLogo />
                    <IndexTextInput placeholder="Name" />
                    <IndexTextInput placeholder="Password" secureTextEntry={true}/>
                    <IndexButton title="Log in" onPress={this.Login} />
                    <IndexText text="Forgot Password?" style={styles.textForgot} />
                    <IndexText text="Don't have an account?" style={styles.textSignUp}>
                        <Text style={styles.textLink} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text>
                    </IndexText>
                </IndexBox>
            </IndexBackground>
        )
    }
}

注册屏幕

export default class SignUp extends Component {
    user = {
        email: '',
        name: '',
        pass: '',
        confirmpass: ''
    };

    setUser …