Проблема с условием в заголовке

Question

Я пытаюсь добавить условную кнопку в заголовок, но получаю сообщение об ошибке, которое (вероятно) говорит, что это не путь к go. Я уверен, что ошибка в условии в праве заголовка стека-навигатора, так как при попытке с прямой кнопкой он работает.

Это код стека-навигатора

const AppNavigator = createStackNavigator(
  {
    Loading: Loading,
    SignUp: SignUp,
    Login: Login,
    Main: Main,
  },
  {
    initialRouteName: 'Loading',

    defaultNavigationOptions: {
      headerLeft: null,
      headerRight: 
      () => (
        if this.loggedIn: true {

          <Button
          onPress={() => alert('I know you')}
          title="Log-out"
          color="#fff"
          />
        }

        else {
          <Button
          onPress={() => alert('Please log in')}
          title="Log-in"
          color="#fff"
          />
             }
      );
      headerStyle: {
        backgroundColor: '#c6f1e7',
      },
      headerTintColor: '#59616e',
      headerTitleStyle: {
        fontFamily: 'Raleway-Regular',
        fontWeight: '400',
      },
    },
  },
);

Где функция в заголовке право вызывает эту ошибку:

Error: TransformError SyntaxError: /Users/tim/Dropbox/co-own.it/apps/kowop/App.js: Unexpected token (33:8)

  31 |       headerLeft: null,
  32 |       headerRight: () => (
> 33 |         if this.loggedIn: true {
     |         ^
  34 |           <Button
  35 |           onPress={() => alert('I know you')}
  36 |           title="Log-out"

showCompileError
    index.bundle?platform=ios&dev=true&minify=false:34606:26
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:34545:29
emit
    index.bundle?platform=ios&dev=true&minify=false:35025:35
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:34872:23
dispatchEvent
    index.bundle?platform=ios&dev=true&minify=false:32343:31
<unknown>

Может ли кто-нибудь указать мне правильное направление, так как я не могу найти ответ?

Спасибо большое!

Тим

Answer 1

В заголовке справа вам нужно изменить код:

 headerRight: 
      () => {
        let button = this.loggedIn? (

          <Button
          onPress={() => alert('I know you')}
          title="Log-out"
          color="#fff"
          />
        )

        : (
          <Button
          onPress={() => alert('Please log in')}
          title="Log-in"
          color="#fff"
          />
             )

return button;
      };

надеюсь, это поможет.

Answer 2

Похоже, что вы используете '(', где вы должны использовать '{' при определении функции

   headerRight: () => ( 

должно быть

headerRight: () => {

    code goes here
}