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

Posted 2023-03-15

【中文标题】React Native - 顶部的 React Navigation 固定组件

【英文标题】：React Native - React Navigation fixed component on top

【发布时间】：2017-10-04 04:27:43

【问题描述】：

我正在尝试在我的 react native 项目中进行导航。我使用TabNavigator 进行内容切换，我想制作一个带有我的徽标的固定顶部栏，每次我滑动更改标签内容时，徽标都粘在顶部并且不会移动。

现在我只需将topcontainer 放入我的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】：

是的，对于 topBar 菜单，您可以使用 navigationOptions，这是最佳实践：

class MainScreen extends React.Component 
  static navigationOptions = () => (
    header: (<YourComponentCustom />),
    // others options see you : https://reactnavigation.org/docs/en/headers.html
  );

  constructor(props) 
    super(props);
    this.state = ;
  

  render() 
    return (
      // your code
    );
  




export default MainScreen;

【参考方案2】：

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>
            )
        ,
    
);

您可以使用自定义标题。详见this