Question

我正在尝试在我的反应原生项目中进行反应导航。我使用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
      }
    }
    );

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

您可以使用自定义标头。查看this

的详细信息

Answer 2

是的，对于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;

React Native - React Navigation固定组件位于顶部

2 个答案: