Question

我希望在 react-native 应用程序中有一个抽屉菜单。所以就像你看到我在我的代码中使用react-native的堆栈导航来确定路由以及在堆栈的屏幕字段中连接到应用程序的DrawerNavigator！：

const Application = StackNavigator({
    Home: {
   screen: Login,
}
,
 Profile: {
screen: Profile,
}

});

const easyRNRoute = DrawerNavigator({

    Stack: {
          screen: Application
         }
        }, {
contentComponent: DrawerMenu,//<XXXDraw
contentOptions: {
activeTintColor: '#e91e63',
style: {
  flex: 1,
  paddingTop: 15,
} });

我在</Application>中使用app.js之类的应用。我用＃34; //指向的DrawerMenu

export default class DrawerMenu extends Component {
    render() {
        return (

        <View>
            <Text>Menu</Text>
        </View>

    );
    }
}

和我的页面 - 我希望在其中显示菜单并遇到问题 - 包含此代码：

export default class Profile extends React.Component {

    static navigationOptions = { header: null };
    constructor(props) {
        super(props);
        this.state = {
            active: 'Today',
          };
    }


    navigate() {
       this.navigate.navigation.navigate('DrawerOpen'); // open drawer
      }
    render() {
        return (

            <View style={styles.countainer}>

                <Text style={styles.header}>Profile</Text>
                <Button onPress={this.navigate} title="Menu"></Button>

            </View>
        );
    }

}

问题是：当我点击菜单按钮时。我收到了这个错误：

undefined不是一个对象（评估＆＃39; this.props.navigation.navigate＆＃39）

我在组件中尝试了一些代码，例如：this.props.navigation.navigate('Home');，他们正在努力，但我不知道为什么当我采取＆＃34; DrawerOpen＆＃34; this.navigate.navigation.navigate 。

中的参数

我做了一些搜索。有人在代码中告诉我删除this.prop，但只是将错误更改为导航未定义。由于这个错误，我陷入了麻烦。这是一个关于网络中DrawerMenu的明显教程的明确湖泊

Answer 1

您可以使用以下代码吗？

if (mFirebaseUser != null) {
            currentUserID = mFirebaseUser.getUid();
        }
 UsersRef = FirebaseDatabase.getInstance().getReference().child("Users");
     UsersRef.child(currentUserID).addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot)
            {
                if(dataSnapshot.exists())
                {   if (dataSnapshot.hasChild("fullname")){
                    String fullname = dataSnapshot.child("fullname").getValue().toString();
                    NavProfileUserName.setText(fullname);
                }if (dataSnapshot.hasChild("profileimages")) {
                    String image = dataSnapshot.child("profileimages").getValue().toString();
                    Picasso.with(MainActivity.this).load(image).placeholder(R.drawable.profile).into(NavProfileImage);

                }else {
                    Toast.makeText(MainActivity.this, "Profile name do not exists...", Toast.LENGTH_SHORT).show();
                }




                }
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });

Answer 2

请阅读以下内容：

https://reactjs.org/docs/handling-events.html

网站的简短引用：

在JSX回调中你必须要小心这个含义。在JavaScript中，默认情况下不会绑定类方法。如果你忘记绑定this.handleClick并将其传递给onClick，那么在实际调用该函数时这将是未定义的。

这不是特定于React的行为;它是JavaScript中函数如何工作的一部分。通常，如果您在其后引用没有（）的方法，例如onClick = {this.handleClick}，则应绑定该方法。

Answer 3

在app.js中使用easyRNRoute应用程序，可能会有效

抽屉菜单不适用于本地反应

3 个答案: