Реагирование навигации Сделайте компонент повторным рендерингом при переходе на другой экран в том же StackNavigator - PullRequest
0 голосов
/ 29 апреля 2018

Я использую реактив-нативный с реактив-navigation@1.5.11.

Environment:
  OS: macOS High Sierra 10.13.1
  Node: 8.9.2
  Yarn: 1.5.1
  npm: 5.8.0
  Watchman: 4.9.0
  Xcode: Xcode 9.1 Build version 9B55
  Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.2 => 0.55.2

Я использую StackNavigator и TabNavigator и настройку маршрутизатора, как показано ниже:

const BillStack = StackNavigator({
  Bill: { screen: Bill },
  CompletedBill: { screen: CompletedBill }
}, 
{ headerMode: 'none' });

export default TabNavigator(
  {
    Bill: { screen: BillStack },
    AddBill: { screen: AddBill },
    Setting: { screen: Setting }
  },
  {
    navigationOptions: ({ navigation }) => ({
       tabBarIcon: ({ focused, tintColor }) => {

        const { routeName } = navigation.state;
        let iconName;

        switch(routeName) {
          case 'Bill':
              iconName = `ios-albums${focused ? '' : '-outline'}`;
              break;
          case 'AddBill':
              iconName = `ios-add-circle${focused ? '' : '-outline'}`;
              break;
          case 'Setting':
              iconName = `ios-cube${focused ? '' : '-outline'}`;
              break;                
          default:
              iconName = `ios-albums${focused ? '' : '-outline'}`;
        }         

        return <IconIonicons name={iconName} size={27} color={tintColor} />;

      } 
    }),
    tabBarOptions: {
      activeTintColor: AppStyles.defaultTextBlueColor,
      inactiveTintColor: '#ABB2B9',
      showLabel: false,
      style: {
        backgroundColor: '#FFFFFF',
        borderTopColor: AppStyles.navbarAndTabbarBorderColor
      }      
    },
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: true,
    swipeEnabled: false
  }
);

Компонент Bill и компонент CompletedBill находятся в одном стеке, и пользователь может перейти к компоненту CompletedBill, щелкнув значок в правом верхнем углу.

class Bill extends React.Component {

  render () {

    return (

        <Container style={AppStyles.defaultScreenStyle}>
          <Header style={AppStyles.defaultHeaderStyle}>
            {this.renderNavBarLeftButton()}
            <Body>
              <Title style={AppStyles.headerTextStyle}>My Task</Title>
            </Body>
            <Right>
              <Button transparent onPress={() => this.props.navigation.navigate('CompletedBill')}>
                <IconIonicons name='ios-archive-outline' size={35} color="#263238"/>
              </Button>
            </Right>          
          </Header>
        </Container>       

    );
  }

}

Код компонента My CompletedBill

class CompletedTask extends React.Component {

  componentWillMount() {  

    console.log('CompletedTask componentWillMount');

  }

  componentDidMount() {

    console.log('CompletedTask componentDidMount');

  }  

  componentWillUnmount () {

    console.log('CompletedTask componentWillUnmount');

  }  

  componentWillReceiveProps() {

    console.log('CompletedTask componentWillReceiveProps');

  }  

  render () {

    return (
        <Container style={AppStyles.defaultScreenStyle}>
          <Header style={AppStyles.defaultHeaderStyle}>
            <Left>
              <Button 
                transparent 
                onPress={() => this.props.navigation.dispatch({ type: 'Navigation/BACK' })}>
                <IconIonicons name='ios-arrow-back' size={30}/>
              </Button>
            </Left>         
            <Body style={{flex: 3}}>
              <Title style={AppStyles.headerTextStyle}>My Completed Bill</Title>
            </Body>
            <Right>
              <Button transparent>
              </Button>
            </Right>           
          </Header>
        </Container>

    );
  }

}

Каждый раз, когда пользовательская вкладка в верхнем правом значке на экране компонента Bill, она будет приводить их к компоненту CompletedBill, и каждый раз, когда весь компонент CompletedBill будет перерисовываться при вызове всех componentWillMount, componentDidMount и т. Д.

В любом случае, чтобы предотвратить повторный рендеринг? Или это обычное поведение?

1 Ответ

0 голосов
/ 29 апреля 2018

Это предполагаемое поведение StackNavigator.

В вашем StackNavigator, CompletedBill объявлено после Bill (объекты должны быть неупорядоченными, но эта библиотека использует его),

Когда вы переходите от Bill к CompletedBill, CompletedBill помещается в стек (с Bill под ним, поэтому Bill не отключается).

При переходе от CompletedBill к Bill, CompletedBill извлекается из стека и отключается.

Решение

Если вы не хотите отключать CompletedBill при переключении между ним и Bill, вы должны использовать TabNavigator вместо StackNavigator. Вы можете скрыть панель вкладок, установив tabBarVisible: false в TabNavigator's navigationOptions.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...