标签: react-navigation

我只想在应用程序的生命周期内显示一次的屏幕的 react-navigation 中是否有任何配置？例如，第一次安装应用程序后，我希望出现帮助屏幕。

如果没有可用的配置，那么最好的方法是什么？我的想法是在本地保存一个变量并在显示帮助屏幕后设置它。一旦用户再次打开应用程序，将检查此变量，并基于该变量将出现下一个屏幕。这里的问题是，如果用户删除了应用程序数据（缓存和所有），那么即使他不是第一次使用，帮助屏幕也会再次出现。

有什么建议？

我已经实现了一个导航抽屉，但我无法显示标题/操作栏

const RootStack = createDrawerNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    intialRouteName: 'Home',
    navigationOptions: {
      headerStyle : {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle : {
        color: 'white',
      },
    },
  }
);


export default class App extends React.Component {
  render() {
    return <RootStack/>;
  }
}

有没有办法使用抽屉导航和标题栏？

我正在学习如何使用 react native 制作漂亮的动画，并且在使用 react-native-fluid-transitions 库时遇到了问题。

当我将共享元素与图像一起使用时，它们在过渡期间闪烁并且仅在过渡结束时出现，有人遇到过同样的问题吗？我没有找到有同样问题的人：/

这是它的样子：

它应该是这样的：

左边的纸完美地变形，但鞋子闪烁。

这是代码（不是我的，但完全相同，即使这个也不起作用）：https : //snack.expo.io/@chrfalch/shoe-shop

它来自本指南：https : //medium.com/@christian.falch/react-native-animation-challenge-1-7022e48a226

谢谢你的帮助

我有一个应用程序需要能够使用两个抽屉导航器，一个在标题的左侧和右侧。

我现在可以用滑动手势打开两个抽屉，但是我需要能够以编程方式打开它。我发现该navigation.openDrawer()功能仅适用于其中一个抽屉，而不适用于另一个，因为它只能使用我的抽屉导航器中的一个导航道具（以先到者为准）。

以下是我的渲染功能：

const LeftStack = createStackNavigator(
  {
    LeftDrawerStack
  },
  {
    navigationOptions: ({navigation}) => ({
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginLeft: 10}} name='menu'/>
        </TouchableOpacity>
      )
    })
  }
);

const RightStack = createStackNavigator(
  {
    RightDrawerStack
  },
  {
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <TouchableOpacity onPress={() => navigation.openDrawer()}>
          <Icon style={{marginRight: 10}} name='ios-bulb'/>
        </TouchableOpacity>
      )
    })
  }
);

export const RouteStack = createStackNavigator(
  {
    screen: LoginScreen,
    navigationOptions: ({navigation}) => ({
      header: null
    }),
    LeftStack,
    RightStack
  }
);

这是我的抽屉路线：

export …

我有一个顶级的本机应用程序，App.js它是：

import { createStackNavigator } from 'react-navigation';

class App extends Component {
  render() { 
    return <AppStack {..this.props} /> 
  }
}

export withAuth(App)

高阶组件withAuth添加user和authenticating支持的地方App：

const withAuth = (Component) =>
  class WithAuth extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        authenticating: true,
        user: false
      }
    }

    componentDidMount() {
      // authenticating logic ...
      firebase.auth().onAuthStateChanged(user => {
        if (user)
          this.setState({
            authenticating: false,
            user: user
          })
        else
          this.setState({
            authenticating: false
          })
      })
    }

    render() …

在我的应用程序中，我有三个屏幕：ScreenA,ScreenB和ScreenC. 它们都应该有一个标题，并且都应该有一个带有前一屏幕名称的后退按钮。我希望ScreenA能够ScreenB使用模态动画打开：

const ModalStack = createStackNavigator(
  {
    ScreenA,
    ScreenB
  },
  {
    initialRouteName: "ScreenA",
    mode: "modal"
  }
);

并且ScreenA还应该能够ScreenC使用默认的从右到左的滑动动画打开。问题是，StackNavigator 已经配置了模态模式。有没有办法动态设置模式？那么使用 from ScreenAto ScreenBmodal 和 from ScreenAto ScreenCcard 吗？

此外，在这种情况下如何处理标题？（对于我问这个问题的原因，请进一步阅读。）

这是我在阅读文档后尝试的。它描述了一个类似的场景。

这是本教程为我翻译的方式：

const SlidingStack = createStackNavigator(
  {
    ScreenA,
    ScreenC
  }
);

const ModalStack = createStackNavigator(
  {
    SlidingStack,
    ScreenB
  },
  {
    mode: "modal"
  }
);

这个解决方案的问题是，当我打开ScreenA. 此外，当我打开模态时ScreenB，后退按钮是空白的。

编辑

在我尝试按照文档解决此问题时，我找到了双标头渲染的解决方案：

const …

我正在将 React Navigation 2 用于一个带有 Expo 的简单 RN 项目。我试图让底部的标题和选项卡显示在模糊的背景上，所以我做了一个 HOC 来用 BlurView 包装库标题以提供该功能。它使模糊效果很好，但不幸的是标题、后退按钮等在此过程中丢失了。有没有办法在 React Navigation 中做到这一点，我使用的代码如下：

const wrappedHeader = props => (
    <BlurView tint="light" intensity={80} style={styles.header}>
        <Header {...props}/>
    </BlurView>
);

class HomeScreen extends React.Component {
    static navigationOptions = {
        header: props => wrappedHeader(props),
        headerTitle: "Home Screen",
    };
   ....
}

基本上我有三个屏幕，第一个是堆栈导航器：

const stackNav = createStackNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions:({navigation}) => ({
            header: null,
        })
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: (props) => ({
            title: "Detail",
        })
    }
})

第二个我有一个按钮可以转到详细信息屏幕：

<TouchableOpacity onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle})}>

最后一个只是信息，我想单击一个按钮并执行： this.props.navigation.goBack()，但是将道具发送到第二个屏幕（MainScreen），一个 setState 和一个整数 id，我该怎么做？

-- 用参数编辑--

我在 MainScreen 中有这个功能：

handleOrdem(texto) {
    console.log('texto: '+texto)
    this.setState({
        param: global.ordemAtiva,
        ordemAtiva: !this.state.ordemAtiva
    });
}
//The onPress code:
onPress={() => this.props.navigation.navigate("Detail", {name: l.name, subtitle: l.subtitle, ordemFunc: () => this.handleOrdem()})}>

这就是我在 Detail.screen 中的称呼：

execBack(param){ …

是否可以将 Tab Navigator 嵌套在 Drawer Navigator 中，然后从 Drawer 导航到特定选项卡？

考虑这个非常基本的设置：

const PrimaryNav = createBottomTabNavigator({
  ScreenOne,
  ScreenTwo
 })

export const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: PrimaryNav,
    drawerLabel: 'Option 1',
  },
  Investment: {
    screen: PrimaryNav,
    drawerLabel: 'Option 2',
  }
})

显然，无论您单击哪个选项，此设置都将解析为 TabNav 中的第一项。

有没有办法传递一个选项来专门导航到每个选项卡？我知道可以将 ScreenOne 和 ScreenTwo 传递给 DrawerNavigator 中的“屏幕”选项，但我想保留选项卡。

我有一个页面 A，然后导航到页面 B，然后返回。我想知道在 A 上会调用哪个生命周期方法，或者会发出事件？