Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
404 views
in Technique[技术] by (71.8m points)

reactjs - React Native:将onclick传递给选项卡(React Native: pass onclick to tab)

I used createMaterialTopTabNavigator to create footer tab, like as below:

(我使用createMaterialTopTabNavigator创建页脚标签,如下所示:)

const TabNavigator = createMaterialTopTabNavigator(
  {
    HomeScreen: HomeScreen,
    UserScreen: UserScreen,
  },
  {
    initialRouteName: 'HomeScreen',
    navigationOptions: {
      header: null,
    },
    tabBarPosition: 'bottom',
    tabBarComponent: FooterTabs,
  },
);

and in FooterTabs on home screen button, i have this code:

(在主屏幕上的FooterTabs按钮中,我有以下代码:)

if (this.props.navigation.state.index === 0) {
    // i want call scrollToUp function in HomeScreen component
}

i want when user is in HomeScreen and press on home button react call scrollToUp method in HomeScreen.

(我想当用户在HomeScreen中并按下Home按钮时,在HomeScreen中反应调用scrollToUp方法。)

===== resolved: I added this code to HomeScreen:

(=====已解决:我将此代码添加到HomeScreen:)

componentDidMount() {
   this.props.navigation.setParams({
      onFocus: this.scrollToUp,
   });
}

and edit FooterTabs like as below:

(并如下编辑FooterTabs :)

if (this.props.navigation.state.index === 0) {
   this.props.navigation.state.routes[0].params.onFocus();
}
  ask by Masoud92m translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Hav you trid putting your Homescreen in a scrollView , and when the user presses home button ,

(尝试将主屏幕置于scrollView中,然后当用户按下主屏幕按钮时,)

class HomeScreen extends Component {

render(){
return(

< ScrollView ref={(ref) => { this.scrollListReftop = ref; }}>
// your code here    
 < /ScrollView>
)
}

}

// add this to scroll to the top of scrollView inside your componentDidMount of Homescreen

(//将其添加到滚动到主屏幕的componentDidMount内部的scrollView顶部)

componentDidMount(){
setTimeout(() =>this.scrollListReftop.scrollTo({x: 0, y: 0, animated: true}),10);
}

Hope its clear, feel free for any doubts.

(希望它清楚,有任何疑问。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...