javascript - 设置为 null 后标题仍然显示

Question

我在我的应用程序中使用react-navigation，我已将其设置为null 对于飞溅组件，但当飞溅组件显示时它仍然显示，请问我可能做错了什么。 搜索你的草药... 并不是为了显示。我正在考虑将状态作为 header: this.state.header 以便在启动组件执行完毕后状态将被重置，即 this.setState({header: true} )，这可能吗

Splash.js

export default class Splash extends React.Component {
  static navigationOptions = {
    header: null
  };
  render() {
    return (
      <View style={styles.container}>
        <Image source={require("../logo.png")} />
      </View>
    );
  }
}

class Box extends React.Component {
  render() {
    return (
      <TextInput
        placeholder="Search for your herbs..."
        underlineColorAndroid={"transparent"}
        style={BackStyles.textBox}
      />
    );
  }
}

Home.js

export default class Home extends React.Component {
  static navigationOptions = {
    headerTitle: <Box />
  };
  constructor(props) {
    super(props);
    this.state = {
      record: []
    };
  }

  render() {
    setTimeout(() => {
      this.setState({ timePassed: true });
    }, 4000);
    if (!this.state.timePassed) {
      return <Splash />;
    } else {
      const herbs = this.state.record.map(herb => (
        <View key={herb.id} style={BackStyles.herb_box}>
          <Image
            style={BackStyles.image}
            source={{ uri: `${herb.name.replace(/ /g, "")}` }}
          />
          <View style={{ flexDirection: "column" }}>
            <Text style={BackStyles.header}>{herb.name}</Text>
            <Text style={BackStyles.sub}>{herb.bot}</Text>
          </View>
        </View>
      ));
      return (
        <View style={BackStyles.main}>
          <View style={{ flex: 1 }}>
            <ScrollView overScrollMode={"never"}>{herbs}</ScrollView>
          </View>
        </View>
      );
    }
  }
}

App.js

import { createStackNavigator } from "react-navigation";

const RootStack = createStackNavigator(
  {
    Home: Home
  },
  {
    initialRouteName: "Home",
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#fff"
      },
      headerTintColor: "#28B564",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);
export default class App extends Component {
  render() {
    return <RootStack />;
  }
}

Answer 1

我之前遇到过和你类似的问题，我认为你应该在App.js中实现splash组件，即在APP.js中执行timepassed变量的状态设置。因此，在 timepassed 为 true 后，您将显示 <RootStack/>

import Home from './components/Home';
import Splash from './components/Splash';
import { createStackNavigator } from 'react-navigation';


const RootStack = createStackNavigator(
{
    Home: Home
},
{
    initialRouteName: 'Home',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#fff',
        },
        headerTintColor: '#28B564',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },
}
);
export default class App extends Component {
constructor(props){
    super(props);
    this.state = {
        timePassed: false,
    };
}

render() {
            setTimeout(() => {
                this.setState({timePassed: true})
            }, 4000);
            if (!this.state.timePassed) {
            return <Splash/>;
            } else {
                return (
            <RootStack/>
             );

    }
}
}