Я использую реактив-нативный с реактив-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 и т. Д.
В любом случае, чтобы предотвратить повторный рендеринг? Или это обычное поведение?