在react选项卡导航中为每个选项卡设置唯一导航选项

时间:2019-05-26 01:36:40

标签: react-native react-router react-navigation

我想将每个标签的唯一导航样式传递到帖子页面。 我想将每个选项卡的整数值传递到更多页面,但是它对我不起作用,也欢迎实现这一点的其他建议。 如果执行默认的导航选项样式和导航有效,但是如果我将导航与每个不同的选项卡放在一起,它将无法正常工作。

  {
    PersonalWall: {
      screen: PersonalWallComponent,
      navigationOptions: () => ({
        headerTitle: "BIIT Facebook",
        headerStyle: {
          backgroundColor: "yellow"
        },
        headerTitleStyle: {
          color: "white",
          textAlign: "center",
          flex: 1
        },
        headerRight: (
          <View style={{ marginRight: 10 }}>
            <TouchableOpacity
              activeOpacity={0.2}
              onPress={() => {
                navigation.navigate("PostScreen");
              }}
            >
              <Icon name="comments" style={{ fontSize: 20, color: "white" }} />
            </TouchableOpacity>
          </View>
        )
      }),
      tabBarPosition: "bottom",
      tabBarOptions: {
        showIcon: true,
        labelStyle: {
          fontSize: 10
        }
      }
      /* navigationOptions: {
        headerTitle: "BIIT Facebook",
        tabBarLabel: "Personal Wall",
        tabBarIcon: ({ tintColor }) => <Icon name="user" size={20} />
      }
      */
    },
    BIITWall: {
      screen: BIITWallComponent,
      navigationOptions: {
        tabBarLabel: "BIIT Wall",
        tabBarIcon: ({ tintColor }) => <Icon name="university" size={20} />
      }
    },
    TeacherMore: {
      screen: TeacherMore
    }
  },
  {
    /*
    navigationOptions: ({ navigation }) => ({
      headerTitle: "BIIT Facebook",
      headerStyle: {
        backgroundColor: "green"
      },
      headerTitleStyle: {
        color: "white",
        textAlign: "center",
        flex: 1
      },
      headerRight: (
        <View style={{ marginRight: 10 }}>
          <TouchableOpacity
            activeOpacity={0.2}
            onPress={() => {
              navigation.navigate("PostScreen");
            }}
          >
            <Icon name="comments" style={{ fontSize: 20, color: "white" }} />
          </TouchableOpacity>
        </View>
      )
    }),
    tabBarPosition: "bottom",
    tabBarOptions: {
      showIcon: true,
      labelStyle: {
        fontSize: 10
      }
    }*/
  }
);

const AppStackNavigatorStudent = createStackNavigator({
  TabNavigatorStudent: { screen: BottomTabNavigationTeacher }
}); ```

0 个答案:

没有答案