没有渲染命令的React-Native导航

有没有办法在不调用渲染函数的情况下将用户重定向到不同的组件（也传递参数）？没有渲染命令的React-Native导航

几乎所有的教程，我发现，他们使用同一开头：

render() { 
return (
    <NavigatorIOS 
    style={styles.container} 
    initialRoute=\{\{ 
     title: 'first', 
     component: First 
    }} /> 
);

}

现在看到我的代码：在renderRow，为touchablehighlights，我需要能够以用户重定向到一个页面有一个参数，（在这种情况下，我需要发送用户组件CourseDetail与COURSE_ID的说法，这样我就可以显示用户进程的详细信息）

class Courses extends Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      dataSource: new ListView.DataSource({ 
 
      rowHasChanged: (row1, row2) => row1 !== row2, 
 
      }), 
 
      loaded: false, 
 
     }; 
 
    } 
 

 
    fetchData() { 
 
    // fetching data here 
 
    } 
 

 
    componentDidMount() { 
 
    this.fetchData(); 
 
    } 
 

 
    render(){ 
 
    if (!this.state.loaded) { 
 
     return this.renderLoadingView(); 
 
    } 
 

 
    return (
 
     <View style={{ 
 
     flex: 1 
 
     }}> 
 
     <ListView 
 
     dataSource={this.state.dataSource} 
 
     renderRow={this.renderRow} 
 
     style={styles.listView} 
 
     /> 
 
     </View> 
 
    ); 
 
    } 
 

 
    renderRow(data) { 
 

 
    var header = (
 
     <View> 
 
      <View style={styles.rowContainer}> 
 
      <View style={styles.textContainer}> 
 
       <Text style={styles.title}>{data.nid}</Text> 
 
       <Text style={styles.description} numberOfLines={0}>{data.title}</Text> 
 
      </View> 
 
      </View> 
 
      <View style={styles.separator}></View> 
 
    </View> 
 
    ); 
 
/////////// 
 
    var cid = []; 
 
    var content = []; 
 
    for(let x=0; x < Object.keys(data.course).length; x++){ 
 
     cid[x] = data.course[x].course_id; 
 
     content.push(
 
     <TouchableHighlight 
 
     underlayColor='#e3e0d7' 
 
     key={x} 
 
     onPress={()=>{console.log(cid[x]);}} //// i need to navigate user to a page with passing arguments (course_id in this case) 
 
     style={styles.child} 
 
     > 
 
     <Text style={styles.child}> 
 
     {data.course[x].title} 
 
     </Text> 
 
     </TouchableHighlight> 
 
    ); 
 
    } 
 
    console.log(cid); 
 
    var clist = (
 
     <View style={styles.rowContainer}> 
 
     {content} 
 
     </View> 
 
    ); 
 
//////////// 
 
    return (
 
     <Accordion 
 
     header={header} 
 
     content={clist} 
 
     easing="easeOutCubic" 
 
     /> 
 
    ); 
 
    } 
 

 
    renderLoadingView() { 
 
    return (
 
     <View style={styles.loading}> 
 
     <Text style={styles.loading}> 
 
      Loading Courses, please wait... 
 
     </Text> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
module.exports = Courses;

在此先感谢！

来源

2016-07-07 Ataomega

您是否在onPress函数中尝试过'this.props.navigator.push（{component：Component}）'，其中组件是您想要推送的组件？ –

感谢您的回复。我在一些教程中看到它，但我不确定它是否适用于我，也因为我是新手，反应原生，我不知道如何使用它。如果你能给我简单的使用例子，我会非常感激。因为在教程中我发现他们是复杂的 – Ataomega

我试过navigator.push，但它给出了错误：TypeError：无法读取属性的'道具'null（...）我错过了什么？ @NaderDabit – Ataomega

被这个问题在这里的帮助： React-Native: Cannot access state values or any methods declared from renderRow

我能够通过改变来解决这一问题：

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow} 
    style={styles.listView} 
    />

要：

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow.bind(this)} 
    style={styles.listView} 
    />

希望这将有助于其他人谁可能有同样的问题。

来源

2016-07-08 12:33:31 Ataomega

没有渲染命令的React-Native导航

回答

相关问题