Question

我在我的应用程序中使用了带有几个屏幕的stackNavigator。当我在navigationOption对象中使用标题时，它不会在标题中显示标题。我已经搜索了一些答案，但我能找到的最接近的答案是这个，与我的关系不大。使用createStacknavigator时，该问题也无法解决。 StackNavigator title not showing in simplest example

//路由器

import { StackNavigator } from 'react-navigation';

export const ScreenSwitcher = StackNavigator({

    SignIn:{
        screen: SignIn,
    },
    Home: {
        screen: Home,
        navigationOption: {
            title: 'HOME TITLE',
        },
    },
    Card: {
        screen: Card,
        navigationOption: {
            title: `CARD TITLE`,
        },
    },
},
    {
        mode: 'card',// modal, card
        headerMode: 'float', // float,screen, none
    }
);

//卡组件

class Home extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            url: 'http://localhost:3000',
            passedInfo: [],
        }
        // Request to the server to get members data
        fetch(this.state.url)
            .then(res => res.json())
            .then(data => {this.setState({passedInfo : data.members })})
            .catch(err => alert(err))
    }

    //  Render each member to the data received
    renderMembers = members =>  members.map((members, index) => <Card info={members} key = {index}/>);

    render = () => { return (
        <View style={styles.main}>

            <ScrollView contentContainerStyle={styles.scroll}>
                <SearchFilter />
                <Header />
                {this.renderMembers(this.state.passedInfo)}
            </ScrollView>

        </View>
    )} 
}

Answer 1

尝试使用navigationOption而不是{{1}}。

Answer 2

在每个您想要标题的组件中，将以下代码放入：

static navigationOptions = {
    title: 'YOUR TITLE HERE',
  };

Answer 3

从“反应导航”导入{StackNavigator};

export const ScreenSwitcher = StackNavigator（{

}， { 模式：“卡片”，//模式，卡片 headerMode：'float'，// float，screen，none } ）;

Answer 4

您可以仅在组件文件中添加navigationOptions，例如在signIn屏幕组件文件中：

class signIn extends React.Component {
  static navigationOptions = {
    title: 'Sign In',
  };

  /* render function, etc */
}

Answer 5

使用如下所示的navigationOptions对象：

const HomeStackNavigator = createStackNavigator({
  Home:{
    screen:App,
    navigationOptions:({navigation})=>({
      headerRight:<DrawerStructure navigationProps={navigation}/>,
      headerTintColor:'black',
      title:'All Ideas',
    }),
  }
});

注意：headerTintColor是标题文本的颜色，标题是实际的标题。

标题标题未显示

5 个答案: