标签: react-native-navigation

我将抽屉设置在右侧，但屏幕标题中的汉堡包图标保持默认左侧，是否有任何属性可以通过将位置更改为右侧？我知道应该通过配置自定义标头来完成，但我不想过度设计我的小项目。

我在 React-navigation/drawer 6 中实现“goBack”功能时遇到问题（“@react-navigation/drawer”：“^ 6.1.4”，准确地说）。

我能够使用以下代码在react-navigation/drawer 5中完美实现它：

<Drawer.Navigator>
    <Drawer.Screen 
        ....
        options={{
          header: ({ scene }) => {
            const { options } = scene.descriptor;
            const title = options.headerTitle;
              return (
                <MyHeader 
                  title={title}
                  iconName={"menu"} 
                  goback={
                    ()=>scene.descriptor.navigation.goBack()}
                />
              );
          },
        }}
      />
</Drawer.Navigator>

React-navigation/drawer 6 的相同修改代码（如下所示）将带我回到初始屏幕（而不是上一个屏幕）。它还会给出警告和错误消息。

<Drawer.Navigator>
    <Drawer.Screen 
        ....
        options={{
          header: ({ navigation, route, options }) => {
              const title = getHeaderTitle(options, route.name);
              return (
                <MyHeader 
                  title={title}
                  iconName={"menu"} 
                  goback={
                    ()=>navigation.goBack()}
                />
              );
          },
        }}
      />
</Drawer.Navigator>

请问，我怎样才能在react-navigation/drawer 6 中实现这个“返回”？

我有一项活动BasicReactActivity延伸到ReactActivity. 我使用此活动作为基础活动来托管我的反应本机视图。我有一个用例，我BasicReactActivity在另一个之上打开一个实例的多个实例。我面临以下异常崩溃：

Fatal Exception: java.lang.AssertionError: Pausing an activity that is not the current activity, this is incorrect! Current activity: BasicReactActivity Paused activity: BasicReactActivity
       at com.facebook.infer.annotation.Assertions.assertCondition(Assertions.java:72)
       at com.facebook.react.ReactInstanceManager.onHostPause(ReactInstanceManager.java:549)
       at com.facebook.react.ReactDelegate.onHostPause(ReactDelegate.java:63)
       at com.facebook.react.ReactActivityDelegate.onPause(ReactActivityDelegate.java:95)
       at com.facebook.react.ReactActivity.onPause(ReactActivity.java:51)
       at com.apollorncontainer.activities.BasicReactActivity.onPause(BasicReactActivity.java:267)
       at android.app.Activity.performPause(Activity.java:8142)
       at android.app.Instrumentation.callActivityOnPause(Instrumentation.java:1508)
       at android.app.ActivityThread.performPauseActivityIfNeeded(ActivityThread.java:4726)
       at android.app.ActivityThread.performPauseActivity(ActivityThread.java:4687)
       at android.app.ActivityThread.handlePauseActivity(ActivityThread.java:4639)
       at android.app.servertransaction.TransactionExecutor.performLifecycleSequence(TransactionExecutor.java:228)
       at android.app.servertransaction.TransactionExecutor.cycleToPath(TransactionExecutor.java:201)
       at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:173)
       at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
       at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2147)
       at android.os.Handler.dispatchMessage(Handler.java:107)

onResume()以下是 my和onPause()of的代码BasicReactActivity：

public static Object REACT_DELEGATE_LOCK = new Object();

@Override
    protected void …

我正在使用react-native-navigation启动一个包含谷歌地图的单屏应用程序，使用 - react-native-maps和一个左抽屉：

导航：

Navigation.startSingleScreenApp({
        screen: {
            screen : 'map.MapScreen',
            title : 'Map',
            navigatorStyle: {
                navBarHidden: true
            }
        },
        drawer : {
            left : {
                screen : 'drawer.DrawerScreen',
                passProps: {}
            },
            disableOpenGesture: true
        },
        animationType: 'slide-down',
        passProps: {}
    })

地图屏幕：

export default class MapScreen extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}>
                </MapView>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center', …

我需要能够从不一定是屏幕组件的模块中导航和重置导航堆栈。这意味着，我不能使用：

const {navigate} = this.props.navigation;

就我而言，当他点击推送通知时，我需要正确地将用户重定向到正确的屏幕。我只有一个回调：

onNotification: function(notification) {
    // show correct screen and reset navigation stack
}

我只需要更多的导航灵活性。那么我该如何为我的案例做到这一点呢？

单击导航栏按钮，抽屉未打开。这是我用于按钮按下的代码

if (event.type === 'NavBarButtonPress') {
        if (event.id === 'sideDrawerToggle') {
            this.props.navigator.toggleDrawer({
                side: 'left',
                animated: true,
            });
        }
    }

这是抽屉设置

Navigation.startTabBasedApp({
        tabs: [
            {
                label: 'Find Place',
                screen: 'places.FindPlace',
                title: 'Find Place', 
                icon: source[0],
                navigatorButtons: {
                    leftButtons: [
                        {
                            icon : source[2],
                            title : 'Menu',
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
            },
            {
                label: 'Share Place', 
                screen: 'places.SharePlace', 
                title: 'Share Place', 
                icon: source[1],
                navigatorButtons: {
                    leftButtons: [
                        {
                            icon: source[2],
                            title: 'Menu',
                            id: 'sideDrawerToggle'
                        }
                    ]
                }
            }
        ],
        drawer: { …

我正在使用React Navigation在屏幕之间路由.我有一个初始屏幕,其中包含一个FlatList项目的onclick,我路由到一个新的屏幕,同时传递这样的参数.

props.navigation.navigate('Details', {
    id: props.id,
    title: props.title
});

在Details屏幕上,我可以使用以下代码接收它,但如何设置状态,因为它是一个静态函数,我无权访问this.setState().

static navigationOptions = ({navigation}) => {
    const {params} = navigation.state;

    console.log(params);
};

我正在尝试react-native-navigation V2但无法更改状态栏颜色。

Navigation.setDefaultOptions({
 statusBar: {
 visible: true,
 style: "dark",
 backgroundColor: "red"
},
topBar: {
 background: {
  color: COLOR.primaryColor
 },
 title: {
  text: "ExampleWix",
  fontSize: 22,
  color: "white"
 },
 visible: true
}
});

但这仅在操作栏上起作用，而在状态栏上没有任何反应，它保持白色。我正在使用RN v = 0.54.2和react-native-navigation = 2.0.2373

更新

更新您的颜色RNN，您就可以更改status bar颜色

我试图在react-native上向此入门项目添加一个路由器react native navigation v2，但是我遇到了与babel软件包有关的问题（可能是）。当我跑步

react-native run-android

我在Metro Bundler中遇到此错误：

加载依赖图，完成。：捆绑失败：错误：[BABEL] D：\ react-native \ projecti \ index.js：预设选项中不允许.overr ides

在Object.keys.forEach.key（D：\ react-native \ projecti \ node_modules \ metro \ node odules \ Obabel \ core \ lib \ config \ validation \ options.js：71：13）在Array.forEach（）在在实例化预设（D：\ react-native \ projecti \ node_modules \ metro \ node_modul s \ l @ babel \ core \ lib \ config \ full.js：242：36）在cachedFunction（D：\ react-native \ projecti \ node_modules \ metro \ node_modules \ babel \ core \ lib …

我设置了一些动态样式，除卸载组件外，一切正常。然后它抛出一个错误：无法在未安装的组件上调用 setState（或 forceUpdate）。

它是堆栈导航器中的第二个屏幕，当我转到第三个屏幕时，一切都很好，但是当我转到第一个并卸载组件时，它会引发错误。

我试图删除 componentWillUnmount 中的事件侦听器但没有成功，显然我做错了什么。

另外，我已经尝试过这种方法 this.props.navigation.isFocused() 并且它再次工作得很好，但是如果我在第三个屏幕上并旋转设备并返回，Dimensions 事件侦听器看不到更改和样式是一个烂摊子。

那么如何在卸载组件时停止事件侦听器？

提前致谢。

constructor(props) {
    super(props);
    Dimensions.addEventListener("change", dims => {
      // this.props.navigation.isFocused() ?
      this.setState({
        resStyles: {
          imageFlex: Dimensions.get("window").height > 500 ? "column" : "row",
          imageHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
          infoHeight: Dimensions.get("window").height > 500 ? "50%" : "100%",
          infoWidth: Dimensions.get("window").height > 500 ? "100%" : "50%"
        }
      });
      // : null;
    });
  }

组件将卸载

componentWillUnmount() {
    console.log("Unmounted");

    Dimensions.removeEventListener("change", dims => {
      // this.props.navigation.isFocused() ?
      this.setState({
        resStyles: {
          imageFlex: …