道具通过React导航抽屉

Question

我正在开发一个锦标赛应用程序，我有一个主屏幕，经理应该登录该主屏幕，以便更新结果。

我的问题是：我有一个抽屉导航器和一个静态密码。如何将道具isAdmin放到其他屏幕？？

情况示例：名为"Points"的屏幕有一个文本输入，其启用状态将取决于评估isAdmin是否为true的函数。

主页屏幕：

export default function Login(){
const [senha, setSenha] = useState('');
var isAdmin = false;

function passCheck(pass){
if(pass == 'Adminlaje'){
isAdmin=true;
alert('Signed In !')
}
else
alert('Wrong password !');

}

return(
<SafeAreaView>

<TextInput
value = {senha}
onChangeText = { (senha) => setSenha(senha) }
/>

<TouchableOpacity onPress = {() => passCheck(senha)}>
<Text>Entrar</Text>
</TouchableOpacity>

</SafeAreaView>
);
}

我的抽屉：

const Screens = ({navigation}) =>{
return(
<Stack.Navigator>

<Stack.Screen name = 'HomeScreen' component ={Login}
options={{
headerLeft: () =>(
<TouchableOpacity style = {styles.button} onPress = {()=> navigation.toggleDrawer()}>
<Entypo name="menu" size={35} color="black" />
</TouchableOpacity>
)
}}>
</Stack.Screen>

<Stack.Screen name = 'Points' component ={Points}
options={{
headerLeft: () => (
<TouchableOpacity style = {styles.button} onPress = {()=> navigation.toggleDrawer()}>
<Entypo name="menu" size={35} color="black" />
</TouchableOpacity>
),
}}
>
</Stack.Screen>
</Stack.Navigator>
);
};
const DrawerContent = (props) => {
return(
<DrawerContentScrollView {...props}>
<SafeAreaView>
<DrawerItem
label='HomeScreen'
onPress = {() => props.navigation.navigate('Login')}

/>
<DrawerItem
label='Points'
onPress = {() => props.navigation.navigate('Points')}
/>
</SafeAreaView>
</DrawerContentScrollView>
)
}
export default () => {
return(
<Drawer.Navigator
initialRouteName = 'Login'
drawerContent={props => <DrawerContent {...props}/>}
>
<Drawer.Screen name = 'Screens' component ={Screens}/>
</Drawer.Navigator>
);
};

Answer 1

答案可能取决于您使用的react导航和react导航抽屉的版本。在使用"；反应导航"："4.0.10〃；，以及"；反应导航抽屉"："2.3.3"；这就是对我有效的：

.............
import { NavigationEvents, NavigationActions } from 'react-navigation';
export default class HomeScreen extends Component {
..........
constructor(props){
super(props)
this.state = {language: 'English', menuOpen: false};
}
...................
render(){
const { navigation } = this.props;
const setParamsAction = NavigationActions.setParams({
params: { isAdmin: this.state.isAdmin },
key: 'PointsScreen',
});
const setParamsTwo = NavigationActions.setParams({
params: { isAdmin: this.state.isAdmin },
key: 'OtherScreen',
});
return(
<View style={styles.container}>
<NavigationEvents
onDidBlur={payload => {this.setState({menuOpen: true})}}
onWillFocus={payload => {this.setState({menuOpen: false});    
this.backHandler = BackHandler.addEventListener('hardwareBackPress', () => 
{
this.props.navigation.dispatch(setParamsAction);
this.props.navigation.dispatch(setParamsTwo);
this.props.navigation.navigate('PointsScreen');
return true;
})}}
/>

在这个例子中，当我打反手球时，我会将信息发送到其他屏幕，但它对任何其他导航事件都是一样的。例如，如果你想把这个添加到你的抽屉打开按钮中，你只需要替换这个.props.navigation.openDrawer((；用于此.props.navigation.anavigation("点屏幕"(；。

在其他屏幕上我有：

.............
render(){
const { navigation } = this.props;
const isAdmin = navigation.getParam('isAdmin') || '';

在抽屉屏幕上我有：

render(){
const { navigation } = this.props;
const pointsProps = navigation.getChildNavigation('PointsScreen');
const isAdmin = pointsProps.getParam('isAdmin') || "";