我有props ,在最初的屏幕上从服务器加载.我想将它们传递到其他选项卡屏幕.然而,我没有在网上找到任何例子.我知道电影props ,但不知道如何设置.我try 过的所有方法都会导致错误.

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

这是我的屏幕设置.我应该把电影props 放在哪里?

<EProj
  screenProps={cats}
/>

任何好的例子都会很有帮助.提前谢谢.

主屏幕设置:

class HomeScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Home',
  };

...

  componentWillMount(){
    console.log("Starting to load assets from server!");
    this.onLoadCats(); /*starts asset loading*/
  }

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

        <Text>Welcome to alpha 1.17 This is hard system test.</Text>
        <AssetsLoad catsL={this.state.catsL} />
      </View>
    );
  }
}

推荐答案

你可以做的是创建一个更高阶的组件来返回导航,在该组件的componentDidMount中,你可以加载数据并通过screenProps传递.

Example

const EProj = TabNavigator({
  Home: { screen: HomeScreen },
  Map: { screen: MapG },
  Login: { screen: Login },
  Profile: { screen: Profile },
}, {
  tabBarPosition: 'bottom',
  animationEnabled: true,
  tabBarOptions: {
    activeTintColor: '#1abc9c',
  },
});

class MainNavigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {cats: []};
  }
  componentDidMount() {
    this.onLoadCats().then((cats) => this.setState({ cats: cats }));
  }
  render() {
    return(<EProj screenProps={{ cats: this.state.cats}} />
  }
}

// Now you can do in your screens
console.log(this.props.screenProps.cats);

/* This is next line is wrong, please check update above */ 
/* console.log(this.props.navigation.state.params.cats); */

React-native相关问答推荐

如何在API调用期间将本地存储(Expressc存储)中的令牌传递到后台

到达安装依赖项时 EAS 构建错误

如何在 React / React Native 中使用 Emscripten 编译的 JavaScript

调用 ES6 方法时绑定上下文.如何从称为回调的方法中访问对象?

如何在react-native 中从 FlatList 中删除元素/索引?

Android Studio 为构建设置 node 目录(Cause: error=2, No such file or directory)

在 LTR 设备上强制 RTL

react-native alignSelf 中心并拉伸到 maxWidth?

React - 类内的useContext

在 React Native 中使用多个上下文提供程序的更好方法

React Native - NSNumber 无法转换为 NSString

路由状态没有通过 redux 保持在 react-native

react native如何访问文件系统?

react-native run-ios 运行失败: Application is unknown to FrontBoard?

React Native 得到这个错误'Unrecognized operator abs'

react-native如何导入元素根目录?

如何设置样式属性以填充剩余空间?

为什么我收到警告:函数作为 React 子级无效?

安卓启动问题:Unsupported class file major version 57

React Navigation获取堆栈标题高度