Question

我注意到使用Tab和Stack导航器会产生一些不良影响，但我无法找出问题所在。
首先，这是我的App.js：

import React, {Component} from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import FirstTab from './react/ui/FirstTab';
import SecondTab from './react/ui/SecondTab';
import ListScreen from './react/ui/ListScreen';

const FirstStack = createStackNavigator({
  FirstTabID: FirstTab,
  ListScreenID: ListScreen,
});

const SecondStack = createStackNavigator({
  SecondTabID: SecondTab,
  ListScreenID: ListScreen,
});

const TabNavigator = createBottomTabNavigator({
  FirstTabID: FirstStack,
  SecondTabID: SecondStack,
});

export default createAppContainer(TabNavigator);

这是FirstTab.js：

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class FirstTab extends Component {
  static navigationOptions = {
    tabBarLabel: 'One',
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => this.props.navigation.navigate('ListScreenID')}
        title="List"
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>This is the first tab screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

这是SecondTab.js：

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class SecondTab extends Component {
  static navigationOptions = {
    tabBarLabel: 'Two',
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => this.props.navigation.navigate('ListScreenID')}
        title="List"
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>This is the second tab screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

最后是ListScreen.js：

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class ListScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>And this is the list screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

好吧，这里出问题的是，这些选项卡分别标记为“第一堆”和“第二堆”。似乎每个选项卡类的navigationOptions.tabBarLabel属性都被完全忽略了。
第二个问题是，每次我点击右上角的列表按钮时，应用程序崩溃，而不是显示列表屏幕。

+++更新+++

import React, {Component} from 'react';
import { createBottomTabNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import FirstTab from './react/ui/FirstTab';
import SecondTab from './react/ui/SecondTab';
import ListScreen from './react/ui/ListScreen';

const FirstStack = createStackNavigator({
  FirstTabID: {
    screen: FirstTab
  }
});

const SecondStack = createStackNavigator({
  SecondTabID: {
    screen: SecondTab
  }
});

const TabNavigator = createBottomTabNavigator(
  {
    FirstTabID: {
      screen: FirstStack,
      navigationOptions: {
        tabBarLabel: 'One'
      }
    },
    SecondTabID: {
      screen: SecondStack,
      navigationOptions: {
        tabBarLabel: 'Two'
      }
    }
  }
);

const Navigation = createStackNavigator(
  {
    Tabs: {
      screen: TabNavigator
    },
    ListScreenID: {
      screen: ListScreen
    }
  },
  {
    initialRouteName: 'Tabs'
  }
);

export default createAppContainer(Navigation);

+++更新FirstTab.js +++

import React, {Component} from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

export default class FirstTab extends Component {
  static navigationOptions = { (navigation) } => ({
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => navigation.navigate('ListScreenID')}
        title="List"
      />
    ),
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>This is the first tab screen!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  label: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

Answer 1

您要在堆栈中定义标签标签，并且必须在底部标签中设置设置。

const TabNavigator = createBottomTabNavigator({
    FirstTabID: { 
        screen: FirstStack, 
        navigationOptions: {
            tabBarLabel: 'One'
        }
    },
    SecondTabID: { 
        screen: SecondStack,
        navigationOptions: {
            tabBarLabel: 'Two'
        }
    },
});

通过这种方式，可以定义标签的标签，还可以在底部标签中定义图标。

static navigationOptions = ({ navigation }) => ({
    tabBarLabel: 'Two',
    title: 'My app',
    headerRight: (
      <Button
        onPress={() => navigation.navigate('ListScreenID')}
        title="List"
      />
    ),    
})

react-native中的堆栈和标签导航器存在问题

1 个答案: