Question

我正在将React-native代码从javascript更改为打字稿和版本升级。

但是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;
`

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

Answer 1

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

react-navigation中的navigationOptions在Typescript中不起作用

1 个答案: