react-navigation中的navigationOptions在打字稿中不起作用答案

【问题标题】：navigationOptions in react-navigation not work in typescriptreact-navigation中的navigationOptions在打字稿中不起作用
【发布时间】：2019-12-16 18:34:55
【问题描述】：

我正在将 react-native 代码从 javascript 更改为 typescript 和版本升级。

但是，react-navigationHeaderOptions 不工作。我找不到原因。

DocumentNavigation.tsx

import {DocumentsScreen} from '../../screens/Documents/DocumentsScreen'
import DocumentsInFolder from '../../screens/Documents/DocumentsInFolder'

export default createStackNavigator({DocumentsScreen, DocumentsInFolder}, {
  headerMode: 'none', 
  navigationOptions: {
    gesturesEnabled: false,
  },
  transitionConfig : () => ({
    transitionSpec: {
      duration: 0,
      timing: Animated.timing,
      easing: Easing.step0,
    },
}),
})

DocumentsScreen.tsx

export const DocumentsScreen: NavigationScreenComponent<{}> = () =>  {
  return (
    <Container>
      <Text>Hello</Text>
    </Container>
  )
}
DocumentsScreen.navigationOptions = (props: NavigationScreenProps): NavigationStackScreenOptions => {
  return {
    title: "Documents",
    headerStyle: {
      elevation: 0,
      backgroundColor: "darkslategray"
    },
    headerLeft: (
      <HeaderLeft>
        <Buticon style={{width:25, height:25, marginLeft:10}} title={'Account'} image={require('../../../../assets/icons/home/account.png')}
          onPress={()=> props.navigation!.navigate('AccountScreen')}
        />
        <Buticon style={{width:25, height:25, marginLeft:10}} title={'Account'} image={require('../../../../assets/icons/home/tutorfind.png')}
          onPress={()=> props.navigation!.navigate('AccountScreen')}
        /> 
      </HeaderLeft>
    ),
    headerRight: (
      <View style={{flexDirection: 'row', width:100, justifyContent:'flex-end'}}>
        <Buticon style={{width:25, height:25, marginRight:10}} title={'Add'} image={require('../../../../assets/icons/home/add.png')}
        onPress={()=>{    
        })
        }}/>
      </View>
    )
  }
}
const HeaderLeft = styled.View`
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 200;

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`

我希望只显示导航标题。目前，标题是完全不可见的。有人帮我请。

【问题讨论】：

标签： typescript react-native react-navigation

【解决方案1】：

也许这个答案太简单了，但是当您将 headerMode 设置为“none”时，这可能是预期的行为？

【讨论】：