Question

我试图创建一个小应用，但有很多问题）我有3个屏幕并使用react-navigation传递数据。该计划如下：

1) loading screen (fetch data and save it to AsyncStorage+handling data and save to obj1 for pickers)
(pass obj1)
2)main screen (get data,render pickers based on it, take selected values and pass them next)
(pass pickers selection+input)
3)some results(get data from Asyncstorage, some calculating and render results)

所以我有两个问题。

当我从3）导航回到2）我有一个错误，屏幕2需要数据，这是从screen1传递的。是的 - 我已经检查过这个数据是否传递到3然后按下后退按钮时为2，并且没有错误，但我确定这是不好的解决方案

和第二......解释）在屏幕3上对选择器进行了一些计算，所以它没有问题。但其余的需要从AsyncStorage获取数据，然后根据Picker值转换它并渲染到ListView。尽管我在componentWillMount上从AS获得了它仍然需要花费很多时间，因此渲染数据是未定义的。当然我使用状态，但我认为这是一个错误的数据处理逻辑。

UPD 所以我尝试将数据从子（屏幕）传递给父（index.ios.js），在那里它定义为第一个加载视图（我使用导航器的堆栈屏幕）

export default class App extends Component {
  constructor(props) {
      super(props);

      };
  }
  myCallback(dataFromChild) {
      console.log("yeah", dataFromChild);

  }

  render() {
    return (
      <LoadingScreen callbackFromParent={this.myCallback}/>
    );
  }
}

和LoadingScreen.js：

render() {
    return(
        <View style={{flex: 1, backgroundColor: '#dc143c', marginTop:20}}>
          <Image
              source={require('./WhiteLogo.png')}
              style={{flex:3, height: undefined, width: undefined, marginLeft:20, marginRight:20}}
              resizeMode="contain"
              qwer={this.props.callbackFromParent('listInfo').bind(this)}
            />
          <Spinner color='white' style={{flex:1}}/>
        </View>
   );
  }
}

我遇到了错误＆＃34;未处理的JS异常：this.props.callbackFromParent不是函数＆＃34;

Answer 1

AsyncStorage可能不是您尝试的最佳解决方案。使用react-navigation进行数据传输并不是最好的。我建议检查redux是否存储全局状态，并在需要时将其传递给页面。还有另一种方法是将函数传递给子组件的props，以便将任何数据从子组件提取到父组件。您可以查看this和this，或下面的示例代码。

<强>父

class Parent extends Component {
    updateState (data) {
        this.setState(data);
    }
    render() {
        <View>
            <Child updateParentState={this.updateState.bind(this)} />
        </View>
    }
}

儿童

class Child extends Component { render() { <View> <Button title="Change" onPress={() => {this.props.updateParentState({name: 'test})}} /> </View> } }

React Native：在屏幕之间传递数据

1 个答案: