반응 네이티브 - 네비게이터 및 toolbarAndroid

Question

하나의 toolbarAndroid 만 탐색기와 함께 응용 프로그램의 모든 화면에서 사용하도록 설정할 수있는 방법이 있습니까?

import React, { Component } from 'react'; 

import { 
    AppRegistry, 
    Navigator, 
} from 'react-native'; 

import ContactList from './src/containers/ContactList.js'; 

class MyIndex extends Component { 
    render() { 
    return (
     <Navigator 
     initialRoute={{ name: 'index', component: ContactList }} 
     renderScene={(route, navigator) => { 
      if (route.component) { 
      return React.createElement(route.component, { navigator, ...route.props }); 
      } 

      return undefined; 
     }} 
     /> 
    ); 
    } 
} 

AppRegistry.registerComponent('reactest',() => MyIndex); 

첫 화면 연락처 목록 표시 :

import React, { Component, PropTypes } from 'react'; 
import { 
    Text, 
    View, 
    TouchableOpacity, 
    TouchableHighlight, 
    ListView, 
    Image, 
    ActivityIndicator, 
    ToolbarAndroid, 
} from 'react-native'; 

import styles from '../../styles'; 
import ContactDetails from './ContactDetails'; 
import logo from '../images/ic_launcher.png'; 

const url = 'http://api.randomuser.me/?results=15&seed=azer'; 

export default class ContactList extends Component { 
    static propTypes = { 
    navigator: PropTypes.object.isRequired, 
    } 
    constructor(props) { 
    super(props); 

    const datasource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); 
    this.state = { 
     animating: false, 
     animatingSize: 0, 
     jsonData: datasource.cloneWithRows([]), 
     ds: datasource, 
     appTitle: 'Test', 
     appLogo: logo, 
    }; 
    } 
    _handlePress() { 
    this.setState({ 
     animating: true, 
     animatingSize: 80, 
    }); 


    return fetch(url) 
     // convert to json 
     .then((response) => response.json()) 
     // do some string manipulation on json 
     .then(({ results }) => { 
     const newResults = results.map((user) => { 
      const newUser = { 
      ...user, 
      name: { 
       title: `${user.name.title.charAt(0).toUpperCase()}${user.name.title.slice(1)}`, 
       first: `${user.name.first.charAt(0).toUpperCase()}${user.name.first.slice(1)}`, 
       last: `${user.name.last.charAt(0).toUpperCase()}${user.name.last.slice(1)}`, 
      }, 
      }; 

      return newUser; 
     }); 

     return newResults; 
     }) 
     // set state 
     .then((results) => { 
     this.setState({ 
      appSubTitle: 'Contacts list', 
      animating: false, 
      animatingSize: 0, 
      jsonData: this.state.ds.cloneWithRows(results), 
     }); 
     }); 
    } 
    renderRow(rowData: string) { 
    return (
     <TouchableHighlight 
     onPress={() => { 
      this.props.navigator.push({ 
      first: rowData.name.first, 
      component: ContactDetails, 
      props: { 
       title: rowData.name.title, 
       first: rowData.name.first, 
       last: rowData.name.last, 
       picture: rowData.picture.large, 
       thumbnail: rowData.picture.thumbnail, 
      }, 
      }); 
     }} 
     > 
     <View style={styles.listview_row}> 
      <Image 
      source={{ uri: rowData.picture.thumbnail }} 
      style={{ height: 48, width: 48 }} 
      /> 
      <Text> 
      {rowData.name.title} {rowData.name.first} {rowData.name.last} 
      </Text> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 
    render() { 
    const view = (
     <View style={styles.container}> 
     <ToolbarAndroid 
      logo={this.state.appLogo} 
      title={this.state.appTitle} 
      subtitle={this.state.appSubTitle} 
      style={[{ backgroundColor: '#e9eaed', height: 56 }]} 
     /> 
     <ActivityIndicator 
      animating={this.state.animating} 
      style={[styles.centering, { height: this.state.animatingSize }]} 
     /> 
     <TouchableOpacity 
      onPress={() => this._handlePress()} 
      style={styles.button} 
      size="large" 
     > 
      <Text>Fetch results?</Text> 
     </TouchableOpacity> 
     <ListView 
      enableEmptySections 
      dataSource={this.state.jsonData} 
      renderRow={(rowData) => this.renderRow(rowData)} 
      onPress={() => this._handleRowClick()} 
     /> 
     </View> 
    ); 

    return view; 
    } 
} 

가 상기 두 번째는 연락처 정보 표시

을

I는 index.android.js의 탐색을 설정할

import React, { 
    Component, 
    PropTypes, 
} from 'react'; 

import { 
    Text, 
    View, 
    Image, 
    ToolbarAndroid, 
} from 'react-native'; 

import styles from '../../styles'; 

export default class ContactDetails extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     animating: false, 
     animatingSize: 0, 
     appTitle: 'Test', 
     appLogo: { uri: this.props.thumbnail, height: 56 }, 
     appSubTitle: `Contact Details - ${this.props.first} ${this.props.last}`, 
    }; 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <ToolbarAndroid 
      logo={this.state.appLogo} 
      title={this.state.appTitle} 
      subtitle={this.state.appSubTitle} 
      style={[{ backgroundColor: '#e9eaed', height: 56 }]} 
     /> 
     <Image 
      source={{ uri: this.props.picture }} 
      style={{ height: 128, width: 128 }} 
     /> 
     <Text>{this.props.title} {this.props.first} {this.props.last}</Text> 
     </View> 
    ); 
    } 
} 

ContactDetails.propTypes = { 
    title: PropTypes.string.isRequired, 
    first: PropTypes.string.isRequired, 
    last: PropTypes.string.isRequired, 
    picture: PropTypes.string.isRequired, 
    thumbnail: PropTypes.string.isRequired, 
}; 

내 첫 번째 화면에는 toolbarAndroid를 설정하고 두 번째 화면에는 다른 하나는 잘 설정되어 있지만 하나의 toolbarAndroid 만 정의하고 setState를 호출하여 업데이트하는 것이 더 낫다는 느낌이 들었습니다.

가능하면 어떻게 될까요?

Answer 1

는 내가보기에 toolbarAndroid 및 네비게이터를 래핑하여 그렇게 할 수 있었다.

Answer 2

Navigator 클래스를 ToolbarAndroid으로 감싸십시오. 이렇게하면 Navigator에 렌더링되는 모든 내용은 Toolbar으로 바뀝니다. 사실, 그 장면들 사이에 공통적 인 모든 것은 나머지를 감싸는 단일 구성 요소에 있어야합니다.

class MyIndex extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     appTitle: 'Test', 
     appLogo: logo, 
    }; 
    } 
    render() { 
    return (
     <View 
     style={styles.container} 
     > 
     <ToolbarAndroid 
      logo={this.state.appLogo} 
      title={this.state.appTitle} 
      subtitle={this.state.appSubTitle} 
      style={[{ backgroundColor: '#e9eaed', height: 56 }]} 
     /> 
     <Navigator 
      initialRoute={{ name: 'index', component: ContactList }} 
      renderScene={(route, navigator) => { 
      if (route.component) { 
       return React.createElement(route.component, { navigator, ...route.props }); 
      } 

      return undefined; 
      }} 
     /> 
     </View> 
    ); 
    } 
}