标题右边的条件问题

Question

我尝试在headerright中添加一个条件按钮，但我收到一条错误消息，(可能(说这不是要走的路。我确定错误出在堆栈导航器标题右侧的状况中，因为当我尝试使用直按钮时，它可以工作。

这是堆栈导航器代码

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
}