Question

我在我的应用程序中使用了react-navigation，我将启动组件设置为null，但仍会在启动组件显示时显示我可能做错了什么。 Search for your herbs...并非要显示。我当时想将状态设置为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内实现启动组件，即在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/>
             );

    }
}
}

Answer 2

在Splash组件内部执行此操作

static navigationOptions = {
  header: {
    visible: false,
  }
}

然后在您的App.js后面initialRouteName: "Home"或navigationOptions内写下（请尝试两种情况）

headerMode: 'screen'

设置为null后仍显示标题

2 个答案: