React native 刷新控件重新加载所有子组件

React native 刷新控件重新加载所有子组件,react-native,React Native,我得到了一个react屏幕,屏幕上显示了进行API调用的组件。刷新时无法重新加载屏幕 所以问题是,我希望主屏幕重新启动所有子组件,但我无法让它工作。我试图更改ScrollView的状态,但什么也没发生 有什么建议吗 我的代码: class HomeScreen extends React.Component{ constructor(props) { super(props); this.state = { refreshing: false, }

我得到了一个react屏幕,屏幕上显示了进行API调用的组件。刷新时无法重新加载屏幕

所以问题是,我希望主屏幕重新启动所有子组件,但我无法让它工作。我试图更改ScrollView的状态,但什么也没发生

有什么建议吗

我的代码:

    class HomeScreen extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    this.props.refreshing.then(() => {
      this.setState({refreshing: false});
    });
  }

    render(){
    return (
        <View style={styles.Container}>
            <Header
            //leftComponent={<AppMenu navigation={props.navigation} />} Bortagen tills behov finns
            centerComponent={<Image source={require('../assets/logo.png')} style={styles.Image} />}
            statusBarProps={{ barStyle: "light-content" }}
            containerStyle={{
            backgroundColor: '#0B2861',
            justifyContent: 'space-around',
            borderBottomWidth:0
            }}
        />
        <ScrollView
        refreshControl={
            <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
            />
        }
        status={this.state.lastRefresh}>
        <Image source={{uri:'https://www.//.jpg'}}
        style={styles.fullImage} 
        resizeMode="cover"
        />

        <View style={styles.TopButtonWrapper}>
        <Button title="Webcam" icon={<FontAwesome5 style={{ marginRight: 6 }} name={'camera'} size={25} color="white"/>} style={styles.TopButtons}
        onPress={() => this.props.navigation.navigate('Webcam')} />

        <Button title="Väder" icon={<FontAwesome5 style={{ marginRight: 6 }} name={'snowflake'} size={25} color="white"/>} style={styles.TopButtons}
        onPress={() => this.props.navigation.navigate('Weather')} />

        <Button title="Pister" icon={<FontAwesome5 style={{ marginRight: 6 }} name={'skiing-nordic'} size={25} color="white"/>} style={styles.TopButtons}
        onPress={() => this.props.navigation.navigate('Live')}/>
        </View>



        <ListNews navigation={this.props.navigation}/>

        </ScrollView>
        </View>
    );
    }
};

export default HomeScreen;
编辑:我解决了我的问题。我没有意识到需要更改键值才能重新安装组件。在ScrollView中更改键值refreshValue使组件重新装载!:)


我解决了我的问题。我没有意识到需要更改键值才能重新安装组件。在ScrollView中更改键值refreshValue使组件重新装载!:)


ListNews.js在主屏幕中的什么位置?@hongdevelop我更新了我的问题。屏幕上的数据正确吗?@hongdevelop是的。你能用这个吗?
    class ListNews extends React.Component{
   constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }


  fetchData() {
      return fetch('MyApiURL')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.blogs,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

    componentDidMount(){
      this.fetchData();
    }
      constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      refreshValue: 1
    };
    console.log(this.state.resetState);
  }

  refreshScreen = () => {
    this.setState({refreshing: true});
    this.setState(({ refreshValue }) => ({
      refreshValue: refreshValue + 1,
    }));
    console.log('Screen refreshed!');
    this.setState({refreshing: false});
  }
      constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      refreshValue: 1
    };
    console.log(this.state.resetState);
  }

  refreshScreen = () => {
    this.setState({refreshing: true});
    this.setState(({ refreshValue }) => ({
      refreshValue: refreshValue + 1,
    }));
    console.log('Screen refreshed!');
    this.setState({refreshing: false});
  }