标签: react-navigation

我正在使用反应导航 5：

我创建了 MainStackScreen 和 AuthStackScreen，

const AuthStack = createStackNavigator();

function AuthStackScreen() {
  return (
    <AuthStack.Navigator headerMode="none">
      <AuthStack.Screen name="Main" component={Main} />
      <AuthStack.Screen name="Login" component={Login} />
      <AuthStack.Screen name="Registration" component={Registration} />
      <AuthStack.Screen name="Home" component={DrawerNavigator} />
      <AuthStack.Screen name="Notifications" component={Notifications} />
      <AuthStack.Screen name="SmsValidation" component={SmsValidation} />
      <AuthStack.Screen name="MoreRegistrationInfo" component={MoreRegistrationInfo} />
    </AuthStack.Navigator>
  );
}

主堆栈屏幕：

const MainScreen = createStackNavigator();

function MainStackScreen({navigation}) {
  return (
    <MainScreen.Navigator>
      <MainScreen.Screen name="Main" component={Main} />
      <MainScreen.Screen name="SmsValidation" component={SmsValidation} />
      <MainScreen.Screen name="MoreRegistrationInfo" component={MoreRegistrationInfo} />
    </MainScreen.Navigator>
  );
}

我想防止在登录我的屏幕之间执行 IOS 滑动操作

反应导航文档仍然很年轻,阅读问题对我来说并不是很有用(每个版本的更改)是否有人使用react-navigationReact Native 在Android中使用工作方法来标题？

我想在我的新反应本机应用程序中使用React Navigation,但我找不到任何示例显示如何在那里创建自定义视图转换.默认转换工作正常,但我希望能够在很少的地方自定义它们,并且文档在这个主题中没有帮助.有人试过吗？在哪里我能看到一个有效的例子？提前致谢.

嗨,我正在尝试使用navigate函数导航到下一个组件.我react-navigation用于多个组件之间的导航.

假设我有index.android.js和DashboardScreen.js组件.我试图DashboardScreen.js从索引组件导航到组件.

它正在导航,但索引组件始终保留在组件堆栈中.当我按回然后打开index.android.js它不应该.有谁知道如何管理这个react-native.在Android中,finish()适用于此.

navigate("DashboardScreen");

当我从SplashScreen那里航行到EnableNotification那时SplashScreen应该被摧毁,如果我从EnableNotification那里航行到CreateMessage那时EnableNotification应该被摧毁,如果我从CreateMessage那里航行到DashboardScreen那时CreateMessage应该被摧毁.截至目前,没有任何组件被销毁.

index.android.js

class SplashScreen extends Component {
  render() {
    if (__DEV__) {
      console.disableYellowBox = true;
    }

    const { navigate } = this.props.navigation;

    AsyncStorage.getItem("@ProductTour:key").then(value => {
      console.log(value);
      if (value) {
        navigate("DashboardScreen");
      }
    });

    return (
     ....
    );
  }
}

const App = StackNavigator( …

我正在研究一个也使用Redux的React Native应用程序,我想用Jest编写测试.我无法模仿反应导航添加的"导航"道具.

这是我的组件:

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Text, View } from 'react-native';

const Loading = (props) => {
  if (props.rehydrated === true) {
    const { navigate } = props.navigation;
    navigate('Main');
  }
  return (
    <View>
      <Text>Loading...</Text>
    </View>
  );
};

Loading.propTypes = {
  rehydrated: PropTypes.bool.isRequired,
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
  }).isRequired,
};

const mapStateToProps = state => ({
  rehydrated: state.rehydrated,
});

export default connect(mapStateToProps)(Loading);

Loading组件作为屏幕添加到DrawerNavigator.

以下是测试:

import React from 'react';
import …

我有几个屏幕可以一一浏览。屏幕1->屏幕2-屏幕3->屏幕4-首页

我想要的是当我回家时，应该清除以前的导航历史记录，并且后退按钮不应该转到屏幕 4 的最后一个导航屏幕。目前，当我在主屏幕上按后退按钮时，它会将我带回堆栈中的最后一个路由是 screen4。我使用了下面的代码。它给我错误没有定义路由或关键主页。我已经在 Screens 类中定义的。任何帮助，将不胜感激。

const resetAction = NavigationActions.reset({
  index: 0,                       
  actions: [NavigationActions.navigate({ routeName: 'Home' })],
});

onPress={() =>  this.props.navigation.dispatch(resetAction)}

我可以想到使用Native Navigation的唯一原因是当我有更多的屏幕和基于JS的解决方案(如React Navigation)将所有屏幕保留在内存中.现在我不是本地开发人员,所以上面的内容可能很模糊.

我正在开发 expo SDK 版本：36 和所有平台 (ios/android/web)

当react-navigation按照文档中的描述第一次安装并运行 jest --watch 时，出现以下警告：

    console.warn node_modules/react-native/Libraries/YellowBox/YellowBox.js:71
      Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

它也发生在浏览器控制台中：

bundle.js:18272 Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More …

我刚刚升级到 Expo SDK 45，收到一条警告：“expo-app-loading 已被弃用，取而代之的是 expo-splash-screen：请使用 SplashScreen.preventAutoHideAsync() 和 SplashScren.hideAsync()。https:// docs。 expo.dev/versions/latest/sdk/splash-screen/ .所以我这样做了并按照提供的链接进行操作。

我现在遇到的问题是，在示例中，他们在根视图的 onLayOut 上调用 onLayOutRootView 。现在我正在使用反应导航，因此我的根视图嵌套在我的应用程序中相当深。

我是否必须将此函数传递到根视图，或者是否有办法将此函数传递到我的提供程序/导航容器之一？或者有其他修复吗？

//imports


export default App = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const scheme = "dark";

  useEffect(() => {
    async function prepare() {
      try {
        // Keep the splash screen visible while we fetch resources
        await SplashScreen.preventAutoHideAsync();
        // Pre-load fonts, make any API calls you need to do here
        await Font.loadAsync(customFonts);
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell …

例如,当你有一个表单组件,并且需要使用导航栏中的按钮提交组件状态的一部分时,如何处理案例？

const navBtn = (iconName, onPress) => (
  <TouchableOpacity
    onPress={onPress}
    style={styles.iconWrapper}
  >
    <Icon name={iconName} size={cs.iconSize} style={styles.icon} />
  </TouchableOpacity>
)

class ComponentName extends Component {

  static navigationOptions = {
    header: (props) => ({
      tintColor: 'white',
      style: {
        backgroundColor: cs.primaryColor
      },
      left: navBtn('clear', () => props.goBack()),
      right: navBtn('done', () => this.submitForm()), // error: this.submitForm is not a function
    }),
    title: 'Form',
  }

  constructor(props) {
    super(props);
    this.state = {
      formText: ''
    };
  }

  submitForm() {
    this.props.submitFormAction(this.state.formText)
  }

  render() {
    return (
      <View>
        ...form …