Question

        import React, {Component} from 'react';
    import {Text, View,TextInput,Button,Alert,KeyboardAvoidingView,ScrollView,Dimensions,TouchableOpacity} from 'react-native';
    import AsyncStorage from '@react-native-community/async-storage';
    import {BoxShadow} from 'react-native-shadow'
    import DropdownAlert from 'react-native-dropdownalert';
    import datum from './data';
    import Parse from "parse/react-native";

    export default class Editprofile extends React.Component {
      static navigationOptions = {
       title: 'Edit Profile',
       headerStyle: {
       backgroundColor:'#E8EDF1',
     },
     headerTintColor:datum.primaryColor,
     headerTitleStyle: {

         fontWeight: 'bold',
         textAlign:"center",
                flex:1
       },

    };
      constructor(props) {
      super(props)

         this.state = {name:"",number:0,windowwidth:Dimensions.get('window').width,windowheight:Dimensions.get('window').height,custid:""};

       }

       componentDidMount() {

         Parse.setAsyncStorage(AsyncStorage);
   getData = async () => {
           try {
             const value = await AsyncStorage.getItem('nameKey')
             if(value !== null) {


                 this.setState({name:await AsyncStorage.getItem('nameKey')
                 ,number: await AsyncStorage.getItem('numberKey')})
       const GameScore = Parse.Object.extend("Customer");
                 const query = new Parse.Query(GameScore);
                 query.equalTo("phonenumber",parseInt(this.state.number));
                 const results = await query.find();


                 for (let i = 0; i < results.length; i++) {
                   var object = results[i];

                   this.setState({custid:JSON.stringify(object.id)})


                 }



            }
           } catch(e) {
            this.dropdown.alertWithType('error', 'Error', 'Error reading values');
           }
         }
      getData();


    }

    updatedata = async () => {
    try {
    await AsyncStorage.setItem('nameKey',this.state.name)
    await AsyncStorage.setItem('numberKey',this.state.number)


    var P = Parse.Object.extend("Customer");

           var instance = new P();

           var temp=this.state.custid.replace(/['"]+/g, '')
          var temptwo=temp.replace(/\//g, "")

           instance.id = temptwo.replace(/['"]+/g, '')

           instance.set("name",this.state.name);
            instance.set("phonenumber",parseInt(this.state.number));

           instance.save();

    this.dropdown.alertWithType('success', 'Success', 'saved locally ');


    } catch (e) {
    this.dropdown.alertWithType('error', 'Error', 'Cannot able to create profile');

    }
  }
      render() {
        const shadowOpt = {
               width:this.state.windowwidth*0.5,
               height:this.state.windowheight*0.07,
               color:"#000",
               border:26,
               radius:3,
               opacity:0.2,
               x:0,
               y:3,
               style:{marginVertical:5}
           }
        return (




                <View style={{flex:1,flexDirection:'column',justifyContent:'space-evenly',alignItems:'center',backgroundColor:'#E8EDF1'}}>
 <BoxShadow setting={shadowOpt}>


                <TextInput
            placeholderTextColor={datum.placeholderTextColor}
                  style={{

                    height: this.state.windowheight*0.07, borderColor:datum.primaryColor, borderWidth: 1,
                    width:this.state.windowwidth*0.5,backgroundColor:datum.primaryColor, fontWeight: '200',elevation: 2
                  }}

                   onChangeText={(value) => this.setState({name:value.trim()})}
                   value={this.state.name}

                />
    </BoxShadow>
 <BoxShadow setting={shadowOpt}>

                <TextInput
                placeholderTextColor={datum.placeholderTextColor}
                keyboardType='number-pad'

                  style={{height: this.state.windowheight*0.07, borderColor:datum.primaryColor, borderWidth: 1,width:this.state.windowwidth*0.5,backgroundColor:datum.primaryColor, fontWeight: '200'}}
                  onChangeText={(value) => this.setState({number:value})}
                   value={this.state.number}

                />
 </BoxShadow>




    <BoxShadow setting={shadowOpt}>
                <Button



                  onPress={()=>this.updatedata()
                  }

                 title="Signup"
                  color={datum.primaryColor}
                 accessibilityLabel="Learn more about this purple button"
          />
          </BoxShadow>


              <DropdownAlert ref={ref => this.dropdown = ref} />

                </View>







        );
      }
     }

我在这个项目中使用抽屉式导航，但是我不明白为什么标题在我的项目中不可见，因为它是空白的，有人可以说如何在我的组件中添加标题，这样我就可以避免抱怨，过去两个星期，我一直在为这个错误而苦苦挣扎

在项目中使用了反应导航，我的app.js

const MyDrawerNavigator = createDrawerNavigator({

        entry:{
          screen:SIgnup,
          navigationOptions: {
        drawerLabel: () => null

    },
        },
        Home: {
          screen: HOme,
          navigationOptions: {
       drawerLabel: 'Home',
       drawerIcon: ({ tintColor }) => (
         <Image
           source={require("./components/Drawbles/Homeicon.png")}
           resizeMode="contain"
           style={{ width: 20, height: 20 }}
         />
       )
     }
        },
        Editprofile: {
          screen: EDit,

          navigationOptions: {
  drawerLabel: 'Edit Profile',
       drawerIcon: ({ tintColor }) => (
         <Image
           source={require("./components/Drawbles/EditProfile.png")}
           resizeMode="contain"
           style={{ width: 20, height: 20, tintColor: tintColor }}
         />
       )
     }
        },
        Offerrides: {
          screen: OFferrides,
          navigationOptions: {
       drawerLabel: 'Offer Rides',
       drawerIcon: ({ tintColor }) => (
         <Image
           source={require("./components//Drawbles/Offerride.png")}
           resizeMode="contain"
           style={{ width: 20, height: 20 }}
         />
       )
     }

        },
        Paymentmethod: {
          screen: PAymentmethod,
          navigationOptions: {
      drawerLabel: 'Home',
       drawerIcon: ({ tintColor }) => (
         <Image
           source={require("./components/Drawbles/Paymentmethod.png")}
           resizeMode="contain"
           style={{ width: 20, height: 20 }}
         />
       )
     }
        },
        Otp: {
          screen: OTp,
          navigationOptions: {
          drawerLabel: () => null  //hide header if not needed so whole screen slide

      },
        }
      },{});

      const MyApp = createAppContainer(MyDrawerNavigator);


 export default MyApp;

Answer 1

默认情况下，抽屉式导航不显示标题，而仅显示绘图菜单。因为它可以通过向右滑动来打开抽屉，如果要使用页眉打开它，则必须做一个组件并在所需的屏幕上使用它。这是标题的一个好例子：https://react-native-training.github.io/react-native-elements/docs/header.html

Answer 2

尝试更改此内容：

static navigationOptions = {
    ...props...
}

对此：

static navigationOptions = () => {
    return {
        ...props...
    }
}

标头在react native中不可见

2 个答案: