Question

我正在使用RN开发一个新的应用程序并使用反应导航库中的TabNavigator，TabNavigator的最基本示例仅显示第一个Tab。我已经在某个地方读到它可能是一个错误，可以通过将反应导航降级到1.0.3来解决，但它对我来说并不起作用。怎么解决？

tab1 tab2

app.js

import React, { Component } from 'react';
import Dashboard from './screens/Dashboard';
import Profile from './screens/Profile';
// import {I18nManager} from 'react-native';
// import { Container, Header, Content, Footer, FooterTab, Button, Icon, Text, Badge, Tab, Tabs } from 'native-base';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

export default TabNavigator({
    home: { screen: Dashboard },
    profile: { screen: Profile },
    nav: { screen: Dashboard },
},

{
    navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === 'home') {
                iconName = `ios-pulse${focused ? '' : '-outline'}`;
            } else if (routeName === 'profile') {
                iconName = `ios-person${focused ? '' : '-outline'}`;
            }
            // You can return any component that you like here! We usually use an
            // icon component from react-native-vector-icons
            return <Ionicons name={iconName} size={25} color={tintColor} />;
        },
    }),
    tabBarOptions: {
        activeTintColor: 'blue',
        inactiveTintColor: 'gray',
    },
    tabBarComponent: TabBarBottom,
    lazy: false,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
}
);

Dashboard.js

import React, { Component } from 'react';
import { TouchableOpacity,
    Title,
    Subtitle,
    Tile,
    Divider,
    ImageBackground,
    Card,
    Image,
    View,
    Caption,
    GridRow,
    ListView,
    Screen
} from '@shoutem/ui';
// import I18n from 'react-native-i18n';
// import {I18nManager} from 'react-native';
//          I18nManager.forceRTL(true);

export default class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.state = {
            restaurants: [
                {
                    'name': 'برنامه ۳۰ روزه هوازی',
                    'address': 'چربی سوزی | کاهش وزن',
                    'image': { 'url': 'https://shoutem.github.io/static/getting-started/restaurant-1.jpg' },
                },
                {
                    'name': 'تمرین سینه',
                    'address': 'افزایش قدرت و حجم عضلات سینه و فرم دهی به آن',
                    'image': { 'url': 'https://shoutem.github.io/static/getting-started/restaurant-2.jpg' },
                },
                {
                    'name': 'تمرین شکم',
                    'address': 'حاضرید که عضلات شکمتان را ورزیده و تکه کنید؟ حرکاتی که در زیر آمده، راهنمایی است که همیشه برای شما کافی و مفید خواهد بود.',
                    'image': { 'url': 'https://shoutem.github.io/static/getting-started/restaurant-3.jpg' },
                },
                {
                    'name': 'تمرین سینه',
                    'address': 'افزایش قدرت و حجم عضلات سینه و فرم دهی به آن',
                    'image': { 'url': 'https://shoutem.github.io/static/getting-started/restaurant-2.jpg' },
                },
                {
                    'name': 'تمرین شکم',
                    'address': 'حاضرید که عضلات شکمتان را ورزیده و تکه کنید؟ حرکاتی که در زیر آمده، راهنمایی است که همیشه برای شما کافی و مفید خواهد بود.',
                    'image': { 'url': 'https://shoutem.github.io/static/getting-started/restaurant-3.jpg' },
                },
                {
                    'name': 'تمرین ران پا',
                    'address': 'این یک تست است.',
                    'image': { 'url': 'https://shoutem.github.io/static/getting-started/restaurant-2.jpg' },
                },
            ],
        };
    }

    renderRow(rowData, sectionId, index) {
    // rowData contains grouped data for one row,
    // so we need to remap it into cells and pass to GridRow
        if (index === '0') {
            return (
                <TouchableOpacity key={index}>
                    <ImageBackground
                        styleName="large"
                        source={{ uri: rowData[0].image.url }}
                    >
                        <Tile>
                            <Title styleName="md-gutter-bottom">{rowData[0].name}</Title>
                            <Subtitle styleName="sm-gutter-horizontal">{rowData[0].address}</Subtitle>
                        </Tile>
                    </ImageBackground>
                    <Divider styleName="line" />
                </TouchableOpacity>
            );
        }

        const cellViews = rowData.map((restaurant, id) => {
            return (
                <TouchableOpacity key={id} styleName="flexible">
                    <Card styleName="flexible">
                        <Image
                            styleName="medium-wide"
                            source={{ uri: restaurant.image.url  }}
                        />
                        <View styleName="content">
                            <Subtitle numberOfLines={3}>{restaurant.name}</Subtitle>
                            <View styleName="horizontal">
                                <Caption styleName="collapsible" numberOfLines={2}>{restaurant.address}</Caption>
                            </View>
                        </View>
                    </Card>
                </TouchableOpacity>
            );
        });

        return (
            <GridRow columns={2}>
                {cellViews}
            </GridRow>
        );
    }

    render() {
        const restaurants = this.state.restaurants;
        // Group the restaurants into rows with 2 columns, except for the
        // first restaurant. The first restaurant is treated as a featured restaurant
        let isFirstArticle = true;
        const groupedData = GridRow.groupByRows(restaurants, 2, () => {
            if (isFirstArticle) {
                isFirstArticle = false;
                return 2;
            }
            return 1;
        });

        return (
            <ListView
                data={groupedData}
                renderRow={this.renderRow}
            />
        );
    }
}

Profile.js

import React, { Component } from 'react';
import { Container, Header, Content, Form, Item, Input, Label } from 'native-base';

// import I18n from 'react-native-i18n';
// import {I18nManager} from 'react-native';
//          I18nManager.forceRTL(true);

export default class Profile extends Component {
    render() {
        return (
            <Container>
                <Header />
                <Content>
                    <Form>
                        <Item floatingLabel>
                            <Label>نام</Label>
                            <Input />
                        </Item>
                        <Item floatingLabel last>
                            <Label>قد (سانتیمتر)</Label>
                            <Input />
                        </Item>
                    </Form>
                </Content>
            </Container>
        );
    }
}

的package.json

  "dependencies": {
    "@shoutem/ui": "^0.23.4",
    "native-base": "^2.4.2",
    "react": "16.3.1",
    "react-native": "0.55.3",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^1.0.3"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.7.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }

我已经尝试过最新版本的react-navigation，所以你在package.json中看到它的降级版本

Answer 1

我已经找到了解决方案，并且我会尽可能具体地面对可能面临这种情况的所有人！

首先，这是I18nManager.forceRTL(true);的问题当你在反应本机代码的任何地方使用这行代码时，它的屏幕将被渲染，并且在第二次重新加载时，应用程序布局正在改变为RTL，即使你评论该行也不会改变！您将不得不使用I18nManager.forceRTL(false);并重新加载几次以恢复正常的ltr设置。

事情是......我们中的一些人确实需要像我想的那样改变RTL布局！好吧，猜测反应导航不尊重这一点，至少目前和TabNabigator部门。

总结一下：RN上的RTL布局会打破你的反应导航标签导航！（截至当前版本，您可以在上面的packages.json中看到）该问题仅使第一个可见，而其他人看到一个平淡无奇的选项卡，如果您打开动画或滑动其他选项卡将显示但标签行为在怪异的方式，意味着当第一个标签处于活动状态时，最后一个标签处于活动状态，反之亦然...中间标签从不会聚焦。因此，您应该知道不能使用带RTL布局的选项卡式导航。在这个问题得到解决后我会更新这个答案！

Answer 2

我使用react-native run-ios运行它，所有选项卡都显示不同的屏幕。如果您指的是当您在主页选项卡上单击时导航选项卡没有更改，则主页和导航选项卡都使用仪表板屏幕。

以下是此项目的package.json文件：

{
  "name": "a",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react-native-code-push": "1.15.0-beta",
    "@babel/core": "^7.0.0-beta.40",
    "@shoutem/ui": "^0.23.4",
    "eslint": "^3.19.0",
    "native-base": "^2.4.2",
    "react": "16.3.1",
    "react-native": "0.55.3",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^1.5.11"
  },
  "devDependencies": {
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

TabNavigator仅显示第一个标签

2 个答案: