react-native - 如何修复反应导航从屏幕顶部替换我的组件？

Question

我正在开发一个反应原生应用程序，并试图了解如何处理它，react navigation因为它会影响我的样式。基本上当我导航到一个页面时，react navigation's带有标题的顶部箭头正在取代我的组件（我想向上移动我的黑色标题栏并理想地使用反应导航的箭头）：

我以以下方式设置了反应导航：

应用程序.js

    const ProfileNavigator = createStackNavigator({
      //Profile: { screen: Profile},
      QR: { screen: GenerateQR },
      EditAccount: { screen: EditAccount }
    });

    const AppNavigator = createSwitchNavigator({
      tabs: bottomTabNavigator,
      profile: ProfileNavigator
    })

    const AppContainer = createAppContainer(AppNavigator);

我有一个标题组件，用于在每个页面顶部使用的样式：

页面模板

    import React, {Component} from 'react';
    import {Text,View, StyleSheet} from 'react-native';
    import { TouchableOpacity } from 'react-native-gesture-handler';
    import { Ionicons } from '@expo/vector-icons';

    class PageTemplate extends Component {
        render() {
            return (
                <View
                    style={{
                        flexDirection: 'row',
                        height: 130,
                        alignSelf: 'stretch',
                        width: '100%'
                    }}>
                <View style={{backgroundColor: 'black', alignSelf: 'stretch',width: '100%'}} />

                    <View style=
                            {{position:'absolute',
                              marginTop: '16%',
                              marginLeft: '3%',
                              display: 'flex',
                              flexDirection: 'row',
                              flex:1
                              }}>
                    <TouchableOpacity onPress={this.props.navigate}>
                        <Ionicons  name="ios-arrow-dropleft" size={32} color="white" />
                    </TouchableOpacity>
                    </View>
                    <Text 
                    style={{
                        position: 'absolute',
                        marginTop: '15%',
                        marginLeft: '12%',
                        color: 'white', 
                        fontSize: 30}}
                        >
                             {this.props.title}
                    </Text>
                </View>


            );
        }
    }

    export default PageTemplate;

我有一个名为 profile 的选项卡，它通过列表项导航以进入帐户编辑页面：

轮廓

    import React from 'react';
    import { StyleSheet, Text, View, Image, TouchableOpacity, TouchableHighlight } from 'react-native';
    import { Ionicons } from '@expo/vector-icons';
    import { List, ListItem } from 'react-native-elements'

    import GenerateQR from './generateQR';
    import PageTemplate from './smallComponents/pageTemplate';
    import pic from '../assets/bigRate.png'


    export default class Profile extends React.Component {

        render() {
          const { navigate } = this.props.navigation;
          navigateBack=()=>{
            navigate('Queue')
          }


          return(
            <React.Fragment>

             <PageTemplate title={'Profile Settings'} navigate={navigateBack} />

              {/*<Image source={pic} />*/}
              {/**  Frst Section */}

              <View style={{
                      //backgroundColor:'blue'
                      }}>
                      <Text style={styles.section}>Account Information</Text>

              </View>
              <TouchableOpacity
                            onPress={()=>{navigate('EditAccount')}}
                            style={{position: 'absolute',
                            marginTop:'32%',
                            flex:1,
                            flexDirection: 'row',
                            flexWrap: 'wrap'}}>

                  <View style={{
                                marginLeft:'5%',
                                flex:1,
                                flexDirection: 'row',
                                flexWrap: 'wrap',
                                justifyContent: 'flex-start',
                                //backgroundColor:'yellow',
                                alignItems: 'center',
                                //borderRadius:50,
                                //height:'60%'
                                }} >
                    <Ionicons style={{marginLeft:'20%'}}  name="ios-person" size={72} />
                  </View>

                  <View style={{paddingTop:50,
                                marginRight:'40%',

                                flex:2,
                                flexDirection: 'row',
                                flexWrap: 'wrap',
                                //backgroundColor: 'red'
                              }}
                                >
                    <Text>Sylvester Stallone</Text>
                    <Text>[phone]</Text>
                    <Text>[e-mail]</Text>
                  </View>


              </TouchableOpacity>

              {/**add line section */}
                     </React.Fragment>
          );
        }
      }

      const styles = StyleSheet.create({

        option : {
          //position: 'absolute',
          marginLeft:'7%',
          alignSelf: 'stretch',
          width: '100%',
          height: '15%',
          //flexWrap: 'wrap',
          justifyContent:'space-between',
          //padding:20 
        },
        section : {
          fontSize:20,
          marginLeft:'5%'
        }

      })


      /**
       * 
       * 
       * 

                      <View style={styles.option}>
                        <Ionicons  name="ios-gift" size={32} />
                        <TouchableHighlight>
                          <Text>Rewards</Text>
                        </TouchableHighlight>
                      </View>




       * 
       */

理想情况下，最好放下箭头图标并将标题向上移动以保持反应导航箭头。

标签： react-nativereact-navigationexporeact-navigation-stack

Answer 1

如果您想摆脱箭头，您可以创建自己的标题。

例子

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('@expo/snack-static/react-native-logo.png')}
        style={{ width: 30, height: 30, alignSelf:"center" }}
      />
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: () => <LogoTitle />,
    headerLeft: () => (
      <Button
        onPress={() => alert('This is a button!')}
        title="back"
        color="#fff"
      />
    ),
  };