时间戳

首页 > 解决方案 > 设置为 null 后标题仍然显示

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

问题描述

我为我的应用程序使用 react-navigation，我已将启动组件设置为 null，但它仍然显示启动组件何时显示，请问我做错了什么。Search for your herbs...不是为了展示。我正在考虑将状态设置为状态，header: this.state.header以便在启动组件完成执行后重置状态，即this.setState({header: true})，这可能吗

搜索您的 Herbs 并不是为了显示

飞溅.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}
      />
    );
  }
}

主页.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>
      );
    }
  }
}

应用程序.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 />;
  }
}

标签： javascriptreactjsreact-nativereact-navigation

解决方案

我之前遇到过和你类似的问题，我觉得你应该在App.js里面实现splash组件，也就是在.js里面设置timepassed变量的状态APP.js。所以在时间流逝之后是真的，然后你显示<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/>
             );

    }
}
}

推荐阅读