Реактивный ящик для навигации Как установить реквизит и стиль для маршрутизации компонентов? - PullRequest
Новая
       38

Реактивный ящик для навигации Как установить реквизит и стиль для маршрутизации компонентов?

0 голосов
/ 21 июня 2019

Я использую ящик для навигации и не могу понять, как установить стили / реквизиты для компонентов, используемых в маршрутах.

Ящик создан так: 

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 не принимает реализацию компонента в качестве параметров?

1 Ответ

1 голос
/ 22 июня 2019

Я не уверен, что это именно то, что вы ищете, но это то, что я делаю в моем основном файле: 

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


}
...