2

以下是我的最小工作示例。它是 3 个基本屏幕和一个抽屉屏幕。在我使用标签数组中的导航项填充抽屉屏幕的render()方法中。DrawerScreen

当我设置 flex 值时，navigationItem一切都开始变得怪异了。

  • 大多数时候重新加载应用程序时，这些项目不会显示在抽屉屏幕中
  • 当项目确实出现时，它们在被点击后就会消失。

如果navigationItem样式表中的样式没有 flex 值，它会按预期工作。我不明白发生了什么，也不知道如何解决这个问题。

代码：

const packageName = 'com.rnplayground';

class FirstTab extends React.Component {
render(){
    console.log(this.props)
    return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>FirstTab</Text>
      </View>
    )
};
}

class SecondTab extends React.Component {


render(){
    console.log(this.props)
    return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>SecondTab</Text>
          </View>
    )
};
}

class ThirdTab extends React.Component {


render(){
    console.log(this.props)
    return(
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>ThirdTab</Text>
        </View>
    )
};
}


class DrawerScreen extends React.Component {

render(){
    const {tabs} = this.props;
    return(
        <View style={styles.navigationContainer}>
            {tabs.map((route, index) => {
                const navigationLabel = route.title;

                return (
                    <TouchableHighlight
                        key={route.screen}
                        onPress={() => {
                            this.props.navigator.switchToTab({
                                tabIndex: index
                            });
                        }}
                        underlayColor='blue'
                    >
                        <View style={styles.navigationItem}>
                            <Text style={styles.navigationLabel}>
                                {navigationLabel}
                            </Text>
                        </View>
                    </TouchableHighlight>
                );
            })}
        </View>     
    )
};
}

function registerScreens(){
    Navigation.registerComponent(`${packageName}.FirstTab`, () => FirstTab );
    Navigation.registerComponent(`${packageName}.SecondTab`, () => SecondTab );
    Navigation.registerComponent(`${packageName}.ThirdTab`, () => ThirdTab );
    Navigation.registerComponent(`${packageName}.DrawerScreen`, () => DrawerScreen );
}

function startApp() {
registerScreens();

const tabs = [
    {
        screen: `${packageName}.FirstTab`,
        title: 'FirstTab',
        icon: require('./image.png'),
        navigatorStyle: {
            tabBarHidden: true,
        },
    },
    {
        screen: `${packageName}.SecondTab`,
        title: 'SecondTab',
        icon: require('./image.png'),
        navigatorStyle: {
            tabBarHidden: true,
        },

    },
    {
        screen: `${packageName}.ThirdTab`,
        title: 'ThirdTab',
        icon: require('./image.png'),
        navigatorStyle: {
            tabBarHidden: true,
        },
    },
];

Navigation.startTabBasedApp(
    {
        tabs: tabs,
        drawer: { 
            left: {
              screen: `${packageName}.DrawerScreen`,
              passProps: {
                  tabs: tabs
              },
              fixedWidth: 800,
            }
        },
        tabsStyle:{
            tabBarHidden: true,
        }
    },
);

}

startApp();

样式表：

const styles = StyleSheet.create({
navigationContainer:{
    flex: 1,
    width: '100%',
    backgroundColor: 'white',
},

navigationItem: {
    flex: 1,
}

});

这是一个显示相关行为的 imgur 链接。

4

0 回答 0