Привет, я новичок, чтобы реагировать на родных и пытаюсь узнать немного вещей. Я пытаюсь передать данные с одного экрана на другой.
Мне нужно передать идентификатор видео в веб-просмотр на другой странице, чтобы воспроизвести видео с YouTube. но идентификатор видео не передается на другой экран.
Я пытался передать Param с одного экрана на другой. В этом проекте я использую навигаторы стека и ящика.
Идентификатор параметра "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 }}
/>
);
}
}