使用Touchable Opacity反應本機導航

Question

我要使“播放”按鈕導航到播放屏幕。 我創建了一個應用程序類作為主文件。 然后在我的cluster1中，我可以按一個播放按鈕。 但是我不知道如何將播放按鈕導航到播放類屏幕。

這是我的應用程序類

export default class App extends Component {
render() {
return (
  <View style={styles.container}>
    <AppNavigator/>
  </View>
);}}
const AppNavigator = StackNavigator({
  Cluster1: { 
  screen: Cluster1,
  },
  Play: { 
  screen: Play,
  },
 });

這是我的Cluster1類

export default class Cluster1 extends Component{
static navigationOptions = {
    title: 'Choose the Mood Cluster to listen',};
render(){
    return(
        <View>
            <SectionList          
             renderItem={({item,index})=>{
                 return(
                <SectionListItem  item={item} index={index}> </SectionListItem>);}} 
                    renderSectionHeader={({ section }) => {
                        return (<SectionHeader section={section} />);}}
                          sections={ClusterData}
                          keyExtractor={(item, index) => item.name}>
            </SectionList>
        </View>      
    );
}}
class SectionHeader extends Component {
    render() {
        const AppNavigator = StackNavigator({
            Cluster1: { screen: Cluster1},
             Play: { screen: Play},
           });
        return (
            <View style={styles.header}>  
                <Text style={styles.headertext}>
                {this.props.section.title}       
                </Text>
                <TouchableOpacity  onPress={() => {this.props.navigation.navigate('Play')}}> Play</TouchableOpacity>
            </View>
        );
    }}

這是我的Play課

export default class Play extends Component{
static navigationOptions = {
    headerMode: 'none', };
    render(){
        return(
            <View style={styles.container}>
        <Text>Play Screen</Text>
            </View>
        );
    }{

我為touchableopacity語句添加了什么？

Answer 1

您可以這樣使用。 使用導航選項來導航組件

const AppNavigator = StackNavigator({
 Cluster1: { screen: Cluster1},
  Play: { screen: Play},
});

 <TouchableOpacity  onPress={() => {this.props.navigation.navigate('Play')}}> Play</TouchableOpacity>