我需要将数据从我的 HomeScreen 传递到我的 SecondScreen。如果我单击 HomeScreen 上的按钮导航到 SecondScreen,则有大量示例说明如何执行此操作,但是如果我使用 v2 底部选项卡导航器转到,则找不到任何显示如何传递到 SecondScreen 的示例从主屏幕到第二屏幕。我尝试过 screenprops 和其他几种方法,并花了大约 8 个小时试图弄清楚,但无法使其正常工作。知道如何做到这一点吗?请,任何提示都会很棒。这是我的代码:
MainTabNavigator.js:
const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
});
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
},
config
);
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<MaterialIcons name="home" size={32} />
),
};
HomeStack.path = '';
const SecondStack= createStackNavigator(
{
Second: SecondScreen,
},
config
);
SecondStack.navigationOptions = {
tabBarLabel: 'Second screen stuff',
tabBarIcon: ({ focused }) => (
<MaterialIcons name="SecondScreenIcon" size={32} />
),
};
SecondStack.path = '';
const tabNavigator = createBottomTabNavigator({
HomeStack,
SecondScreen
});
tabNavigator.path = '';
export default tabNavigator;
HomeScreen.js:
class HomeScreen extends Component {
constructor(props){
super(props);
}
componentDidMount(){
this.setState({DataFromHomeScreen: 'my data that Im trying to send to SecondScreen'})
}
//....
SecondScreen.js:
class SecondScreen extends Component {
constructor(props){
super(props);
}
render()
return(
<View>{this.props.DataFromHomeScreen}</View>
)
//....
****请在下面找到我尝试过的东西:****
HomeScreen.js:当我这样做时,它首先接收它,然后传递 null
render(){
return(
<View>
//all of my home screen jsx
<SecondScreen screenProps={{DataFromHomeScreen : 'data im trying to pass'}}/>
</View>
)
}
MaintTabNavigator.js:当我这样做时,它首先接收它,然后传递 null
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => (
<MaterialIcons name="home" size={32} />
),
};
<HomeStack screenProps={{DataFromHomeScreen:'data im trying to pass'}}/>
HomeStack.path = '';
我也尝试过其他 5 种方法,但此时我什至不记得了。我不想在第二个屏幕中再次调用我的数据库来获取用户信息。我认识的人都不知道react或react-native。https://reactnavigation.org/docs/en/stack-navigator.html 上的 React Native 文档充其量是最少的,只显示以下内容:
const SomeStack = createStackNavigator({
// config
});
<SomeStack
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
即使您转到文档中的示例并搜索“screenprop”一词,您也不会在任何一个示例中看到任何对屏幕props功能的提及。我见过的所有问题都只解决了如何在按钮点击时传递props,这很容易。我正在尝试做的可能吗?我确信我不是唯一一个使用标签导航器在主屏幕中检索数据并需要将其传递到其他屏幕的人。任何建议都有帮助。谢谢。
附:这是我正在调用主屏幕的登录类:
class SignInScreen extends React.Component {
static navigationOptions = {
title: 'Please sign in',
};
render() {
return (
<View
style={styles.container}
contentContainerStyle={styles.contentContainer}>
<View>
<SocialIcon
title='Continue With Facebook'
button
type='facebook'
iconSize="36"
onPress={this._signInAsync}
/>
</View>
);
}
_signInAsync = async () => {
let redirectUrl = AuthSession.getRedirectUrl();
let result = await AuthSession.startAsync({
authUrl:
`https://www.facebook.com/v2.8/dialog/oauth?response_type=token` +
`&client_id=${FB_APP_ID}` +
`&redirect_uri=${encodeURIComponent(redirectUrl)}`,
});
var token = result.params.access_token
await AsyncStorage.setItem('userToken', token);
await fetch(`https://graph.facebook.com/me?fields=email,name&access_token=${token}`).then((response) => response.json()).then((json) => {
this.props.navigation.navigate('Home',
{
UserName : json.name,
FBID : json.id,
email : json.email
});
}) .catch(() => {
console.log('ERROR GETTING DATA FROM FACEBOOK')
});
};
}
export default SignInScreen;