Question

我刚刚开始学习ReactNative，我似乎无法在他们的教程页面上找到相关信息。

我有一个在页面上呈现的列表，列表中的每个项目都有一个信息按钮。单击信息按钮时，我想渲染一个新屏幕（组件），显示有关该项目的其他信息。

items-list.component.js：

render: function() {
        let content;

        if (this.state.dataSource._cachedRowCount > 0) {
            // console.log('data render list')
            content = (<View style={styles.container}>
                            <View style={globalStyles.header}>                     
                                <Text style={globalStyles.headerText}>Calls History</Text>
                                <Icon name="plus" size={24} color="#fff" style={{marginRight: 4}}/>                            
                            </View>

                            <ListView dataSource={this.state.dataSource}
                                      renderRow={this.renderRow}>
                            </ListView>
                        </View>);
        } else {
            content = (<View><LoadingAnimation></LoadingAnimation></View>);
        }
        return (<View style={styles.container}>{content}</View>);
    },


renderRow(rowData) {

                //row contains item name, image displayed here:


                <Image source = {{uri: rowData.peers[0].avatar}}
                       style={globalStyles.avatar} />
               <View style ={styles.container}>       
                    <Text style={styles.nameText} numberOfLines={1}>{rowData.peer}</Text>
                    <Text style={styles.rowText} numberOfLines={1}>{rowData.ts.date}</Text>                     
                </View>      

                 <TouchableHighlight onPress ={() =>  <CallsInfo callsData={rowData}/> }> 
                     <Icon name="information" size={24} color="#9e9e9e" style={styles.rowIcon}/>

                </TouchableHighlight>

calls-info.js：

var React = require('react-native');


var MyButton = React.createClass({
  render() {
    return (
      <View>
        <Text>{this.props.callsData}</Text>
      </View>
    )
  },
});

我想要做的是当按下TouchableHighLight时，用户将被带到一个新屏幕，并将数据传递给它。

我试图通过将CallsInfo（一个组件）传递给按钮来自行完成此操作，但是当我点击它时，没有任何反应。

谢谢！

Answer 1

关于它的好article。

您需要使用navigator对象在应用中的不同场景之间切换。

例如在您的App.js中，renderScene可能如下所示：

onChangeRoute() {
 this.navigator.push({Page: YourComponent, props: yourprops});
}

您可以使用以下逻辑附加onPress处理程序

this.props.extras in YourComponent

因此，您的组件可以使用以下命令访问extras道具：

public void onCreate() {
    // startActivityForResult(intent, VOICE_DATA_INTEGRITY_CHECK);   
    new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                Activity activity = getActivity();
                if (activity != null && !activity.isFinishing() && !activity.isDestroyed()) {
                    startActivityForResult(intent, VOICE_DATA_INTEGRITY_CHECK);
                }
            }
        }, 500);
 }

在React Native中单击按钮时如何呈现组件

1 个答案: