react-native - 使用登录按钮时，如何使用 react-native-fbsdk 自定义登录后的登录页面？

Question

使用这个react-native 包装器，我使用 Login Button + Access Token 在文档中实现了 Login 的解决方案。

const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
  AccessToken
} = FBSDK;

var Login = React.createClass({
  render: function() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    alert(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
}); 

结果是一个带有 fb 登录按钮的屏幕，登录时导航到一个带有注销按钮的页面。首先，如果我没有为它编写代码，这个注销按钮来自哪里。另外，我不想要注销按钮。而是想为我的应用显示主页？我哪里错了？

Answer 1

如果您想在登录后显示主页（并且可能仅在您未登录时显示登录页面），您必须自己跟踪您所在州（或商店）的登录状态。

简单的例子：

var Login = React.createClass({

  getInitialState() {
    return {isLoggedIn: false}
  },

  render: function() {

    if (this.state.isLoggedIn) {
      return (
        <Text> I'm Logged In! </Text>
      )
    } else {
      return (
        <View>
          <LoginButton
            publishPermissions={["publish_actions"]}
            onLoginFinished={
              (error, result) => {
                if (error) {
                  alert("login has error: " + result.error);
                } else if (result.isCancelled) {
                  alert("login is cancelled.");
                } else {
                  AccessToken.getCurrentAccessToken().then(
                    (data) => {
                      this.setState({isLoggedIn: true})
                      alert(data.accessToken.toString())
                    }
                  )
                }
              }
            }
            onLogoutFinished={() => alert("logout.")}/>
        </View>
      );
    }        
  }
}); 

对于更复杂（和真实）的功能，您可能需要使用Navigator