一周后,我终于找到了一种使用Redux
&react-native-restart
插件解决这个问题的逻辑方法 。我还使用了一个漂亮的启动画面,用户不会为此目的显示重启进度。
因此,让我们深入研究代码:
还原动作:
export const GET_APP_LAYOUT_DIRECTION = 'GET_APP_LAYOUT_DIRECTION';
export const SET_APP_LAYOUT_DIRECTION = 'SET_APP_LAYOUT_DIRECTION';
export const getAppLayoutDirection = () => ({
type: GET_APP_LAYOUT_DIRECTION,
});
export const setAppLayoutDirection = direction => ({
type: SET_APP_LAYOUT_DIRECTION,
direction
});
Redux 减速器:
import {
GET_APP_LAYOUT_DIRECTION,
SET_APP_LAYOUT_DIRECTION,
} from '../actions/app';
const initialState = {
layout: 'ltr',
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case GET_APP_LAYOUT_DIRECTION:
return {
...state,
};
case SET_APP_LAYOUT_DIRECTION:
return {
...state,
layout: action.direction,
};
default:
return state;
}
};
export default reducer;
主屏幕:
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import RNRestart from 'react-native-restart'; // Import package from node modules
import { getAppLayoutDirection, setAppLayoutDirection } from '../actions/app';
class Home extends PureComponent {
constructor(props) {
super(props);
this.props.dispatch(getAppLayoutDirection());
if(this.props.layout === 'ltr'){
this.props.dispatch(setAppLayoutDirection('rtl'));
RNRestart.Restart();
}
}
componentDidMount() {
if(this.props.layout && this.props.layout === 'rtl'){
SplashScreen.hide();
}
}
}
const mapStateToProps = (state) => {
const { layout } = state.app;
return {
layout
};
}
export default connect(mapStateToProps)(Home);