Question

Index.js 我尝试做启动画面。

export default class LaunchScreen extends Component{
constructor(props){
    super(props);
    this.state= {
    loaded:false
    }
}

    componentWillMount(){
        Thread.load(v => this.setState({loaded:true}));
    }

render(){
    const { navigate } = this.props.navigation;
    return(
        <View style={styles.container}>
            {this.state.loaded ? navigate("Form")
            :
            <View style={styles.imageContent}>
            <Image style={styles.image}
            source={require('../images/launch_icon.png')}/>
            </View>
            }
         </View>
        )}}


export default class thread{
static load(cb){
    setTimeout(cb,3000);

}

}

当我使用这些代码时，我收到警告＆＃34;在现有状态转换期间无法更新＆＃34;。如何解决？

Answer 1

您尝试在返回内部导航，尝试将渲染代码更改为：

 render(){
    const { navigate } = this.props.navigation;
    if(this.state.loaded) navigate("Form")

    return(
        <View style={styles.container}>

            <View style={styles.imageContent}>
            <Image style={styles.image}
            source={require('../images/launch_icon.png')}/>
            </View>

         </View>
        )
}

编辑：但是您应该在shouldComponentUpdate（）内部执行导航部分，检查nextState.loaded是否与this.state.loaded不同并且为true，如：

shouldComponentUpdate(nextProps, nextState){
    if((nextState.loaded!=this.state.loaded)&&nextState.loaded){
         navigate("Form")
         return true
    }
    return false
}

Answer 2

我看到一些问题，但我不认为这些是你的主要问题。

您只能有一个默认导出，因此如果两个类实际上都在一个文件中，请从线程类中删除“default”。
非常确定所有类名必须以React中的大写字母开头，因此将“thread”更改为“Thread”

但我认为你的实际问题是你直接在渲染中调用navigate('Form')。尝试添加handleNavigation类方法并在其中调用this.handleNavigation。所以你会留下这样的东西......

export default class LaunchScreen extends Component {
  state = {
    loaded: false
  }

  componentWillMount() {
    Thread.load( () => this.setState({loaded: true}));
  }

  handleNavigation = () => {
    this.props.navigation('Form');
  }

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.loaded 
            ? this.handleNavigation
            : <View style={styles.imageContent}>
                <Image style={styles.image}
                source={require('../images/launch_icon.png')}/>
              </View>
        }
     </View>
    );
  }
}

export class Thread {
  static load(cb){
      setTimeout(cb,3000);

  }
}

在现有状态下无法更新

2 个答案: