我有一个从抽屉菜单导航到的组件，组件的名称是Servicecategory，现在我想从这个Servicecategory导航到另一个组件，这个组件的名称是Home，这个Home组件包含一个视图寻呼机，我想导航到home组件并将视图分页器更改为从ServiceCategory即this.setpage(0)导航到的特定页面，这是可能的，这是我的下面的代码
SERVICECATEGORY
import { connect } from "react-redux";
import { trueBrowse,trueCart, trueHome, trueMessages, trueServices,falseBrowse,
falseCart, falseHome,falseMessages, falseServices} from "../actions/index";
const mapStateToProps = state => {
return { home: state.home, browse: state.browse,cart: state.cart, messages: state.messages };
};
const mapDispatchToProps = dispatch => {
return {
trueBrowse: browse => dispatch(trueBrowse(browse)),
trueServices: services => dispatch(trueServices(services)),
trueHome: home => dispatch(trueHome(home)),
trueMessages: messages => dispatch(trueMessages(messages)),
trueCart: cart => dispatch(trueCart(cart)),
falseServices: services => dispatch(falseServices(services)),
falseMessages: messages => dispatch(falseMessages(messages)),
falseHome: home => dispatch(falseHome(home)),
falseCart: cart => dispatch(falseCart(cart)),
falseBrowse: browse => dispatch(falseBrowse(browse))
};
};
class reduxServicesCategory extends Component {
static navigationOptions = {
header: null,
drawerLockMode: 'locked-closed'
};
stateChanger() {
this.props.trueHome("home");
this.props.falseMessages("messages");
this.props.falseBrowse("soo");
this.props.falseCart("cart");
this.props.trueServices("services");
//ON navigate to Land, I want to change the view of the view pager, that is currently in land
this.props.navigation.navigate('Land');
}
constructor(props) {
super(props);
this.state = {
search: false
};
}
showSearch(){
this.setState({search: true},);
};
render(){
return(
<View style={styles.container}>
<View style={{flexDirection: 'row',height: 80,backgroundColor: '#fcfcfc',
marginBottom: 15,
justifyContent: 'center',width: '100%',alignItems: 'center' }}>
<TouchableNativeFeedback onPress={() => this.props.navigation.goBack(null)}>
<MaterialCommunityIcons style={{position: 'absolute',left: 10,top: StatusBar.currentHeight
}} name="arrow-left" size={30} color="#535461"/>
</TouchableNativeFeedback>
{this.state.search?
<TextInput
autoFocus={true}
ref="search"
placeholder="Search..."
returnKeyType={'search'}
placeholderStyle={{fontSize: 20, fontFamily: 'mont-semi',}}
placeholderTextColor="#000"
underlineColorAndroid={'transparent'}
style={{
position: 'absolute',top: StatusBar.currentHeight-5,
backgroundColor: '#fcfcfc',width: '65%',alignSelf: 'center',
fontSize: 20, fontFamily: 'mont-medium', color: '#000',
}}/>:<Text style={{fontFamily: 'mont-semi',
fontSize: 20,
color: '#000',}}>
Service Category
</Text>}
{this.state.search?
<TouchableNativeFeedback onPress={() => this.setState({search: false})}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="cancel" size={30} color="#535461"/>
</TouchableNativeFeedback>:
<TouchableNativeFeedback onPress={this.showSearch.bind(this)}>
<MaterialIcons style={{position: 'absolute',right: 10,
top: StatusBar.currentHeight
}} name="search" size={30} color="#535461"/>
</TouchableNativeFeedback>}
</View>
<ScrollView>
<View style={{flexDirection: 'row',marginBottom: 25,
justifyContent: 'space-evenly'}}>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
onPress={this.stateChanger.bind(this)}>
<View style={styles.cats}>
<View style={styles.icon}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../makeup_icon.png')}/>
</View>
<Text style={styles.iconDes}>
{'\n'}MAKEUP ARTIST
</Text>
</View>
</TouchableNativeFeedback>
</View>
国家组成部分（主页）
<ViewPagerAndroid style={{flex: 1}} initialPage={0}
onPageSelected={this.onPageSelected.bind(this)}
ref={(viewPager) => {
this.viewPager = viewPager
}}>
<View style={{flex: 1}} key="1">
{this.props.services ?
<View style={{
width: '100%',
marginTop: 10,
}}>
<Services navigation={this.props.navigation}/>
</View>
<View style={{flex: 1}} key="2">
<Messages/>
</View>
<View style={{flex: 1}} key="3">
<Browse navigation={this.props.navigation}/>
</View>
APP.JS（抽屉）
const screens = createStackNavigator({
Home: {
screen: ServiceDetail,
},
Signup: {
screen: Signup
},
Login: {
screen: Login
},
Land: {
screen: Home,
},
Find: {
screen: Find
},
Shop: {
screen: Shop
},
SetCat: {
screen: ServicesCategory
},
ServiceProfile: {
screen: ServiceProfile
},
ServiceDetail: {
screen: On,
},
JobBid: {
screen: JobBid
}
});
const RootStack = DrawerNavigator(
{
drawer: {
screen: screens
}
},
{
drawerWidth: Width * (80 / 100),
contentComponent: (props) => (
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<LinearGradient colors={['#EE8F62', '#f2ac88']}
style={{width: '100%', height: 190}}>
<View style={{
flex: 1, flexDirection: 'row', alignItems: 'center',
paddingTop: 20, justifyContent: 'center', alignContent: 'center'
}}>
<View style={{
width: 150, height: 150,
borderRadius: 150 / 2,
}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./profile.png')}/>
</View>
<View style={{flexDirection: 'column', marginBottom: 13}}>
<Text style={{fontFamily: 'mont-semi', color: '#fff', fontSize: 20}}>
Jane Doe</Text>
<Text style={{fontFamily: 'mont', color: '#fcfcfc', fontSize: 18, marginTop: 10}}>
Profile</Text>
</View>
</View>
</LinearGradient>
<View style={{flex: 1, backgroundColor: '#fcfcfc'}}>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Shop', {})}>
<View style={{
height: 60,
width: '100%',
backgroundColor: '#fcfcfc',
flexDirection: 'row',
paddingLeft: 20,
paddingRight: 10,
paddingTop: 10,
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center'
}}>
<View style={{
flexDirection: 'row', height: 40,
width: '100%', backgroundColor: '#f2f2f2', borderRadius: 3,
alignItems: 'center', paddingLeft: 10
}}>
<View style={{height: 21, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./cart.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#F3B690'
}}>Shop by Category</Text>
</View>
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('SetCat', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./recruitment.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sẹlẹ Services</Text>
</View>
</TouchableNativeFeedback>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 23, width: 23}}><Image
resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./payment-method.png')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>Sell on Sẹlẹ</Text>
</View>
<TouchableNativeFeedback onPress={() =>
props.navigation.navigate('Login', {})}>
<View style={{
height: 60, width: '100%', backgroundColor: '#fcfcfc',
flexDirection: 'row', paddingLeft: 20, paddingTop: 10
}}>
<View style={{height: 21, width: 23}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('./account.jpg')}/></View>
<Text style={{
marginLeft: 23, fontFamily: 'mont-medium', fontSize: 14
, color: '#615D5D'
}}>My Account</Text>
</View></TouchableNativeFeedback>
</View>
</View>
)
},
{
initialRouteName: 'Home',
}
, {}
);
我认为你应该使用componentDidUpdate
像这样
componentDidUpdate(){
if(this.props.home && this.props.services){
this.viewPager.setPage(0);
}
}