react-navigation 抽屉如何设置道具和样式来路由组件？

Question

我正在使用抽屉进行导航，但不知道如何为路线中使用的组件设置样式/道具。

抽屉是这样创建的：

const navigator = createDrawerNavigator(
  {
    Home,
    OtherPage,
  }
);

const AppContainer = createAppContainer(navigator);

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={displayDisclaimer:true};
    this.pressDisclaimer = this.pressDisclaimer.bind(this);
  }

  pressDisclaimer(){
    disclaimerPassed = true;
    this.setState({displayDisclaimer:false});
  }

  render(){
    // return <Drawer/>
    if(this.state.displayDisclaimer)
      return (
        <View style={styles.container}>
          <Disclaimer clickHandler={this.pressDisclaimer}/>
        </View>
      )
    else return <AppContainer/>;
  }  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

因此，如果我想为某些页面添加样式，我通常会渲染组件，例如 <MyComponent style = {this.style.moreStyle} otherProps={propsHere}/>

由于 createDrawerNavigator 不将组件实现作为参数，我该如何设置？

Answer 1

我不确定这是否正是您要查找的内容，但这是我在主文件中所做的：

import Home from './components/home'
import OtherPage from './components/otherpage'
import DrawerScreen from './components/drawerscreen'
import LoginScreen from './components/loginscreen'

const navigator = createDrawerNavigator(
  {
    Home: {screen: Home},
    OtherPage: {screen: OtherPage},
    LoginScreen: { screen: LoginScreen },
  },
  {
    contentComponent:   ({ navigation }) => (
          <DrawerScreen navigation={navigation} />
        ),
    drawerWidth: 300,
      initialRouteName: "LoginScreen"
  }
);

const AppContainer = createAppContainer(DrawerNavigator);

 export default class App extends Component {
  render() {
   return (

       <AppContainer />

    );
  }
}

然后在我的抽屉组件文件中，我执行以下操作：

import { DrawerActions, NavigationEvents, NavigationActions } from 'react-navigation';

export default class DrawerScreen extends Component {

  navigateToScreen = (route) => () => {
 const navigateAction = NavigationActions.navigate({
   routeName: route
});
this.props.navigation.dispatch(navigateAction);
this.props.navigation.dispatch(DrawerActions.closeDrawer())
}


 render () {

  const { navigation } = this.props;
  const homeProps = navigation.getChildNavigation('Home');

    console.log(homeProps);
console.log(navigation);
return (
<View>
  <ScrollView>
    <View>


                <View>
                <View>
                <Button onPress={() => this.props.navigation.navigate('Home')} title="Home"/>
                </View>
                </View>
                <View>
                <View style={styles.myMargins}>
                <Button onPress={() => this.props.navigation.navigate('OtherPage', {propsFromDrawer: "blahblahblah", styleprops: "blahblahblah"})} title="Other Page"/>
                </View>
                </View>


    </View>

  </ScrollView>
</View>
 );
}

}

这里的抽屉将从主页获取道具，并在单击其他页面按钮时将其他道具发送到其他页面。我不确定这是否适用于您正在做的结构，但它适用于我的应用程序。

编辑：这是从其他页面导航的示例。

import React, { Component } from 'react';

import {
View,
Text,
 ScrollView,
 StyleSheet,
 ActivityIndicator,
 TouchableOpacity,
 BackHandler,
 } from 'react-native';

import { NavigationEvents, NavigationActions } from 'react-navigation';

import { Header } from 'react-native-elements';
export default class OtherPage extends Component {

static navigationOptions = {
title: 'OtherPage',
headerStyle: {
  backgroundColor: '#0000CD',
},
headerTintColor: '#fff',
};



constructor(props){
 super(props)

 this.state = {stuffInState: 'blahblahblah'}

}


componentDidMount() {

this.backHandler = 
  BackHandler.addEventListener('hardwareBackPress', () => {
  this.props.navigation.navigate('Home');
  return true;
  });

   }

  componentWillUnmount() {
  this.backHandler.remove();
  }

  render(){

  const { navigation } = this.props;
  const propsFromDrawer = navigation.getParam('propsFromDrawer') || '';
  const styleProps = navigation.getParam('styleprops') || '';

  //console.log(this.state);
  //console.log(navigation);

return(<View>
  <NavigationEvents
onWillFocus={payload => {this.setState({stuff: stuffFromProps})}}
/>
 <Header
leftComponent={{ icon: 'menu', color: '#fff', onPress: () => 
 this.props.navigation.openDrawer() }}
 centerComponent={{ text: this.state.title, style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff', onPress: () => 
 this.props.navigation.navigate('Home')}}

 />

<View>
<TouchableOpacity

onPress={() =>

this.props.navigation.navigate('Home', {
 propsImSending: 'blahblahblah',

})} title="Home"
>
<Text>Home</Text>
</TouchableOpacity>

</View>);
}


}