Question

我正在尝试从一个视图到另一个视图进行简单的按钮导航（我还不确定这是否称为视图）。

例如，我将Featured.js作为

var SearchPage = require('./Search');

class Featured extends Component {
    showSearchPage(){
        console.log('showing search page');
        this.props.navigator.push({
            title: "Search",
            component: SearchPage
        });
    }

    render() {
        return (
           <TouchableHighlight onPress={() => this.showSearchPage()}>
              <View style={styles.row}>
                <Text style={styles.label}>Open Search Page</Text>
              </View>
            </TouchableHighlight>          
        );
    }
}

module.exports = Featured;

然后将Search.js作为另一个类，非常类似于Featured.js。如何在视图中创建一个按钮，打开Search.js视图。

目前我正在接受＆＃34;无法读取undefined＆＃34;的属性推送。如何定义导航器或其他简单的导航方式？

注意：我不想制作TabBar导航。

Answer 1

所以基本上你有一个应用程序页面，根据用户操作呈现子视图。首先，我建议你使用状态而不是道具来做你正在做的事情（它是动态的而不是静态的）。

var SearchPage = require('./Search');
var Initial = require('./Initial');
var AnotherSubView = // ...

class Featured extends Component {
    getInitialState: function() {
        title: "initial",
        component: <Initial/>
        return({title:title, component:component});
    }
    showSearchPage(){
        console.log('showing search page');
        this.setState({
            title: "Search",
            component: <SearchPage/>
        });
    }

    render() {
        var title = this.state.title;
        var component = this.state.component;
        return (<div>
           <TouchableHighlight onPress={() => this.showSearchPage()}>
              <View style={styles.row}>
                <Text style={styles.label}>Open Search Page</Text>
              </View>
            </TouchableHighlight>
            {component}          
        </div>);
    }
}

module.exports = Featured;

使用getInitialState加载您的第一个/着陆子视图。然后单击更改您的组件。

顺便说一下道具是未定义的，因为你没有定义它= p。你应该使用setProps。无论如何，我认为这不是正确的，但你知道。

希望它有所帮助！

如何将简单的按钮导航到其他视图？

1 个答案: