屏幕3：

Question

嗨，我是新来的反应本地人，并尝试学习一些东西。我正在尝试将数据从一个屏幕传递到另一个屏幕。

我需要将视频ID传递到另一页上的Web View才能播放YouTube视频。但视频ID并未传递到另一个屏幕。

我试图将Param传递到一个屏幕到另一个屏幕。在这个项目中，我正在使用堆栈和抽屉导航器。

参数ID为“ ytId”

我也试图通过AsyncStorage传递参数。请任何人在这个问题上为我提供帮助，并在此先感谢。

屏幕3：

import React from 'react';
import { Text, View, FlatList, Image, TouchableWithoutFeedback} from 'react-native';
import { Button, Icon } from 'native-base';

export default class App extends React.Component {
  navOptions

  static navigationOptions = ({ navigation }) => {

    navOptions = navigation;
    const { params = {} } = navigation.state;

    return {
      headerLeft: (
        <Button
          transparent
          onPress={() => params._onHeaderEventControl()}
        >
          <Icon
            name="menu"
            style={{ fontSize: 30, color: 'white' }}
          />
        </Button>
      )
    }
  }
  constructor(props) {
    super(props);
    this.state = { listLoaded: false };
  }
  onHeaderEventControl() {
    const { params = {} } = navOptions.state;
    params._openNav()
  }

  componentDidMount() {
    this.props.navigation.setParams({
      _onHeaderEventControl: this.onHeaderEventControl,
      _openNav: () => this.openDrawer()
    })

    return fetch(
      'https://www.googleapis.com/youtube/v3/search?part=snippet&q=lcwell&type=video&key=AIzaSyCwCHIfFvkMZ1aR6eIvy4sUIgqV6hIZ3qU')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          listLoaded: true,
          videoList: Array.from(responseJson.items)
        })
      })
      .catch((error) => {
        console.error(error);
      });
  }


  openDrawer() {
    this.props.navigation.openDrawer();
  }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        {this.state.listLoaded && (
          <View style={{ paddingTop: 0 }}>
            <FlatList
              data={this.state.videoList}
              renderItem={({ item }) =>
                <TubeItem
                  navigate={navigate}
                  id={item.id.videoId}
                  title={item.snippet.title}
                  imageSrc={item.snippet.thumbnails.high.url}
                />

              }
              keyExtractor={(item, index) => index.toString()}
            />

          </View>

        )}
        {!this.state.listLoaded && (
          <View style={{ paddingTop: 30 }}>
            <Text>LOADING</Text>
          </View>
        )}
      </View>
    );
  }
}

export class TubeItem extends React.Component {

onPress = () => {
    this.props.navigate('Screen5', { ytId: this.props.id })
  };
  render() {
    return (
      <TouchableWithoutFeedback onPress={this.onPress}>
        <View style={{ paddingTop: 20, alignItems: 'center' }}>
          <Image
            style={{ width: '100%', height: 200 }}
            source={{ uri: this.props.imageSrc }}
          />
          <Text>
            {this.props.title}
          </Text>
        </View>

      </TouchableWithoutFeedback>
    );
  }
}

屏幕5：

import React from 'react';
import { WebView } from 'react-native';

export default class VideoDetail extends React.Component {
  navOptions

  static navigationOptions = ({ navigation }) => {

    navOptions = navigation;
    const { params = {} } = navigation.state;
  }
  onHeaderEventControl() {
    const { params = {} } = navOptions.state;
    params._openNav()
  }

  componentDidMount() {
    this.props.navigation.setParams({
      _onHeaderEventControl: this.onHeaderEventControl,
      _openNav: () => this.openDrawer()
    })
  }
  render() {

    let tubeId = this.props.navigation.getParam('ytId', 'NO VIDEO');
    let tubeUrl = `https://www.youtube.com/embed/${tubeId}`;
    return (
      <WebView
        style={{ marginTop: 20 }}
        javaScriptEnabled={true}
        source={{ uri: tubeUrl }}
      />

    );
  }

}

Answer 1

我建议您使用像redux这样的状态容器。它允许您将变量和参数从组件传递到另一个组件。我没有详细解释所有内容，其他人都比我做得更好，并且有很多教程来实现redux。您可以找到Redux官方网站https://redux.js.org/introduction/getting-started

主要步骤将是：

将redux导入您的package.json
使用createStore方法从导入的包中创建商店
使用新创建的对象<Provider store={store}>围绕主视图
在商店中声明所需的方法
将屏幕3 和屏幕5 连接到Redux

然后，您将能够在屏幕之间传递变量，并可以通过props属性非常容易地访问变量。

它将简化您的生活！

否则，我们将需要您声明堆栈和抽屉的方式才能回答：-）

在堆栈和抽屉导航器屏幕之间传递参数的问题-React-Native

屏幕3：

屏幕5：

1 个答案: