Question

我的问题是我不知道要放"title"。我有TabNavigator，有两页。您可以在图像上看到我真正想要的。

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';


class HomeScreen extends React.Component {

    render() {

        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <View >
                    <Button
                        title='Click me'
                        onPress={() => this.props.navigation.navigate('HomeScreen')} />
                </View>
            </View>
        );
    }
}

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        );
    }
}

export default createMaterialTopTabNavigator({
    Test1: { screen: HomeScreen },
    Test2: { screen: SettingsScreen },
});

Answer 1

一种可能的解决方案是将MaterialTopTabNavigator包裹在StackNavigator内，并在其中添加title选项。因此，您的代码应类似于以下内容：

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <View >
            <Button
                title='Click me'
                onPress={() => this.props.navigation.navigate('HomeScreen')} />
          </View>
        </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>
        </View>
    );
  }
}

const App = createMaterialTopTabNavigator({
  Test1: { screen: HomeScreen },
  Test2: { screen: SettingsScreen },
});

export default createStackNavigator({
  app: {
    screen: App,
    navigationOptions: {
      title: 'Screen title',
    },
  },
});

反应导航，createMaterialTopTabNavigator。问题

1 个答案: