React-native-router-flux: Judul Dinamis

Dibuat pada 19 Feb 2016  ·  23Komentar  ·  Sumber: aksonov/react-native-router-flux

Halo,
Terima kasih untuk modul yang hebat - Apakah ada cara untuk mengubah status judul dan navbar secara dinamis.

Sebagai contoh.
<Route key="UserCredentials" name="UserCredentials" hideNavBar={this.state.UserCredentialsNavBar} component={UserCredentials} initial={ false } title={this.state.title} schema="withoutAnimation" />

Dan kemudian saya akan memiliki pendengar yang akan mengubah status this.state.UserCredentialsNavBar 'true' atau 'false' dan this.state.title 'Some title' atau 'Some other title'.

Saya mencoba tetapi tidak mendapatkan tempat.

Terima kasih sebelumnya.
:0)

Komentar yang paling membantu

Terima kasih aksonov.
Saya mungkin tidak memahami Anda dengan benar.
Jadi, misalnya jika saya ingin mengubah status judul. saya akan menelepon
Actions.refresh({title: 'Some other title'})
Terima kasih banyak untuk kembali kepada saya.
:0)

Semua 23 komentar

Saya baru saja menambahkan dukungan untuk mengatur properti tanpa transisi navigator menggunakan Actions.refresh(props), silakan coba (versi 2.3.1)

Terima kasih aksonov.
Saya mungkin tidak memahami Anda dengan benar.
Jadi, misalnya jika saya ingin mengubah status judul. saya akan menelepon
Actions.refresh({title: 'Some other title'})
Terima kasih banyak untuk kembali kepada saya.
:0)

Buruk saya, semuanya bekerja dengan baik. Terima kasih banyak atas bantuan Anda aksonov. Sangat dihargai. :0)

Saya mengalami masalah yang tampaknya seperti bug di sini dengan menyetel judul secara dinamis. Sepertinya Actions.refresh menyetelnya untuk semua rute, mengesampingkan judul statisnya.

Dalam kasus saya, saya memiliki pengaturan detail master di mana rute master memiliki prop judul dan judul rute detail hanya diatur secara dinamis. Ketika saya berada di rute detail dan judul berubah, yang terjadi adalah judul dan tombol kembali berubah menjadi teks yang sama. Saat kembali ke master, judul dinamis tetap aktif (bukan kembali ke judul skemanya).

Saya baru mengenal React Native jadi saya tidak yakin apakah ini berdasarkan desain atau tidak...?

Terima kasih!

Apakah ada cara untuk mengaturnya untuk adegan tertentu meskipun saat ini saya tidak berada di adegan itu? yaitu

Actions.refresh({key: 'home', title: 'My new title'})

@greatwitenorth apa kasus penggunaan Anda yang sebenarnya?
misalnya jika Anda menavigasi ke tampilan dengan kunci view2 Anda dapat mengatur judul dengan alat peraga seperti ini

Actions.view2({ title: 'My New Title' })

Masalah saya adalah saya tidak menavigasi ke adegan yang membutuhkan judulnya diperbarui. Layar saya memperbarui alamat pengguna, tetapi alamat tersebut ditampilkan sebagai judul pada layar yang benar-benar terpisah.

@greatwitenorth saya mengalami masalah yang sama. Bagaimana cara mengubah judul tanpa menavigasi ke rute baru dengan judul yang diubah?

Oke, saya seharusnya membaca dokumentasi dengan lebih baik, hanya saja
Actions.refresh({title: 'new title'})

@greatwitenorth apakah Anda menemukan solusi yang layak?
Saya mengambil judul dari status, jadi setiap kali status berubah, saya ingin tampilan tertentu memiliki nilai itu sebagai judul. Terkadang orang mengubah judul dan menavigasi melalui tombol kembali, dalam hal ini saya sepertinya tidak dapat mendefinisikan parameter {title: } (dan meneruskan nilai status dalam tindakan kembali), atau apakah saya melewatkan sesuatu?

Menyegarkan di salah satu metode siklus hidup komponen (atau dalam render), membuat aplikasi mogok karena mungkin masuk ke loop tak terbatas karena mengubah properti status.

Salam Hormat,

@JeroenNelen Saya memiliki masalah serupa dan menyelesaikannya dengan meletakkan penyegaran di ComponentDidMount dan mengatur status di reduksi Redux - Saya mengikat tindakan Redux ke setiap tindakan pengguna yang mengubah judul, memperbarui status aplikasi, dan alat peraga penyegaran membaca pembaruan juga.

Jadi pada dasarnya sesuatu seperti baris ini di ComponentDidMount:

Actions.refresh({title: this.props.state.myapp.myvalue})

@jondbm terima kasih atas sarannya, tetapi kami telah memutuskan untuk beralih ke navigator yang berbeda.

Salam Hormat,

@JeroenNelen navigator mana yang Anda gunakan sekarang? (Jika Anda tidak keberatan berbagi)

Mengapa pengaturan di bawah ini tidak menyegarkan tombol kanan? console.log menulis nilai baru, tetapi judul yang tepat tidak pernah diperbarui?

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    console.log(title);
    return (
      <RouterWithRedux rightTitle={title} onRight={() => alert('All right')}>
        <Scene key="root">
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);

@jaynakus righttitle atau tombol kanan?

Judul!

Saya akan menyarankan menggunakan navbar khusus, dengan apa pun yang Anda inginkan di dalamnya.

@jaynakus coba letakkan rightTitle dan onRight Anda ke dalam komponen Scene Anda alih-alih di tingkat RouterWithRedux teratas, itu mungkin berhasil.

@jondbm menempatkan mereka ke root scene tidak menyelesaikan, tetapi memanggil Actions.refresh() di componentWillReceiveProps berhasil ;)

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.basket.length !== nextProps.basket.length) {
      console.log(nextProps.basket.length);
      let title = '(' + nextProps.basket.length + ')';
      Actions.refresh({rightTitle: title});
    }
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    return (
      <RouterWithRedux>
        <Scene key="root" rightTitle={title} onRight={() => alert('All right')}>
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);

Ini luar biasa, apakah ada cara bersih untuk memudarkan/menghilangkan judul saat beralih? Dalam kasus saya, saya memiliki pergantian judul ketika pengguna menggulir lebih dari 100px. Akan menyenangkan untuk memudarkan transisi. Bersulang.

@greatwitenorth apa kasus penggunaan Anda yang sebenarnya?
misalnya jika Anda menavigasi ke tampilan dengan kunci view2 Anda dapat mengatur judul dengan alat peraga seperti ini

```js
Actions.view2({ judul: 'Judul Baru Saya' })

Bagaimana kita bisa mengaksesnya di file setup?

Jika saya memiliki konfigurasi seperti ini:

<Router>
                    <Scene key="root" navBar={NavBar}>
                        <Scene
                            hideNavBar
                            key="login"
                            component={Login}
                            initial
                        />

                        <Scene drawer
                               drawerPosition="right" drawerWidth={300}
                               key="task"
                               contentComponent={DrawerView}
                               drawerIcon={drawerIcon}
                               rightButtonImage="menu"
                               onRight={() => {
                                   Actions.drawerOpen()
                               }} hideNavBar
                        >

                            <Scene key="taskInner"
                                   leftButtonImage="arrow-back"
                                   component={TaskView}
                                   onLeft={() => {
                                       Actions.popTo('tasksList')
                                   }}
                            />
                        </Scene>

                    </Scene>
</Router>

Kemudian Actions.task({ title: 'My New Title' }) atau Actions.refresh({title: "My New Title"}) tidak berfungsi. Bagaimana cara mengatur judul atau mengirim beberapa properti saat memiliki laci?

Apakah halaman ini membantu?
0 / 5 - 0 peringkat