Question

我想让“播放”按钮导航到播放屏幕。我创建了一个app类作为主文件。然后在我的cluster1中，我可以按下播放按钮。但我不知道如何将播放按钮导航到播放类屏幕。

这是我的App类

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

这是我的Cluster1 Class

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>

使用Touchable Opacity进行React Native导航

1 个答案: