React Native - React Navigation固定组件在顶部

I'm trying react navigation inside my react native project. I using TabNavigator for content switching and I would like to make a fixed top bar with my logo inside, each time i swipe to change the tab content, the logo are stick on the top and not moving.

我正在尝试在我的反应原生项目中做出反应导航。我使用TabNavigator进行内容切换，我想制作一个带有我的徽标的固定顶栏，每次我滑动以更改标签内容时，徽标都贴在顶部而不是移动。

Now i just put the topcontainer inside my HomeScreen

现在我把顶部容器放在我的HomeScreen中

    class HomeScreen extends React.Component {
      render() {
        return(
          <View style={styles.container}>
            <View style={styles.topcontainer}>
              <View style={styles.applogocontainer}>
                <Image 
                source={require('./resources/logo.png')}
                  style={styles.applogo}
                />
              </View>
            </View>
          </View>
        );
      }
    }

    class SecondScreen extends React.Component {
      render() {
        return(
          <View style={styles.container}>
            <Text style={styles.whitetext}>Second</Text>
          </View>
        );
      }
    }

    class ThirdScreen extends React.Component {
      render() {
        return(
          <View style={styles.container}>
            <Text style={styles.whitetext}>Third</Text>
          </View>
        );
      }
    }

    const TabNavs = TabNavigator({
      Home: { screen: HomeScreen },
      Second: { screen: SecondScreen },
      Third: { screen: ThirdScreen },
    },{
      tabBarPosition:'bottom',
      swipeEnabled:true,
      tabBarOptions:{
        tinColor: '#fff',
        activeTintColor: '#eee',
        inactiveTintColor: '#fff',
        style: {
          position: 'absolute',
          backgroundColor: 'transparent',
          left: 0,
          right: 0,
          bottom: 0,
        },
        indicatorStyle:{
          backgroundColor:'white'
        },
        showIcon:true
      }
    }
    );

1 个解决方案

#1

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

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

const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        SecondScreen: {
            screen: SecondScreen,
        },
    },
    {
        initialRouteName: 'Home',
        navigationOptions: {
            header: (
                <View style={styles.container}>
                    <View style={styles.topcontainer}>
                        <View style={styles.applogocontainer}>
                            <Image
                                source={require('./resources/logo.png')}
                                style={styles.applogo}
                            />
                        </View>
                    </View>
                </View>
            )
        },
    }
);

You can use custom header. See detail from this

您可以使用自定义标头。从这里看详情