Question

我正在使用抽屉进行导航，无法弄清楚如何为路线中使用的组件设置样式/道具。

这样创建抽屉：

server {
listen <ip>:80 default;
listen <ip>:443 ssl http2 default_server;
ssl_certificate <path>/generate_crt.crt;
ssl_certificate_key <path>/generated_key.key;
client_body_buffer_size 500M;
client_body_timeout 300s;
keepalive_timeout 5000;
client_max_body_size 700M;
access_log syslog:server=unix:/dev/log;
root /tmp/MVM_APPS/angularjs/dist;
index index.html index.htm;
server_name localhost;
location /api {
uwsgi_pass unix:///tmp/uwsgi.sock;
    include uwsgi_params;
    uwsgi_read_timeout 120;
    uwsgi_send_timeout 1000;
}
location /ws/ {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_pass http://<ip>:8008;
proxy_read_timeout 86400;
}
location /static {
    alias /<path>/static;
}
location / {
    try_files $uri $uri/ /index.html;
}
}

因此，如果我想为某些页面添加样式，通常会渲染类似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', }, });

的组件

由于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>
 );
}

}

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

编辑：这是从OtherPage导航的方法示例。

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>);
}


}

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

1 个答案: