如何修复反应导航从屏幕顶部移动我的组件？

Posted 2021-04-12

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

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

App.js

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

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

    const AppContainer = createAppContainer(AppNavigator);

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

pageTemplate

    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;

我有一个名为个人资料的标签，该标签可浏览列表项以转到帐户编辑页面：

个人资料

    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-navigation箭头。

答案

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

示例

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