I am using react-native-router-flux for the navigation in my react-native mobile app.
I want to call Actions.sceneKey() from drawer using a variable sceneKey which will be based on the store state.
Let's say, there are 3 menus in drawer:
menu1
menu2
menu3
I just want to call Actions.{{ selectedMenu }}, is this somehow possible?
You can use bracket notation, see property accessors.
Here is a example of how you can use it:
const selectedMenu = 'menu1'; //menus values coming from your store
Actions[selectedMenu]();
Make sure the variable is of type string and matches one of your defined routes.
Related
The logic was developed using the route.state.index value in the existing code.
After upgrading to 6, "state" went into Symbol(CHILD_STATE), but I don't know how to access it.
The value I want is an index with a numeric value of 2
React navigation provides "useNavigationState"
https://reactnavigation.org/docs/use-navigation-state/
In the above link, we see the detail about the hook.
So, I can solve to use this hook.
const noRenderLocation = useNavigationState(state => state);
//.routes[0].state.index <-- This 'index' is that I want to contract !
I use the ReadMore plugin to crop articles in a page. The plugin provides a props to redirect to a http link when the "read more" is clicked. But I need to display the link in a new tab. The props receives the link in a string.
I tried several ways to add the target blank attribute to this string before passing it to the props. With no success. Like:
http://www.example.com/page-to-see.html target=_"blank"
I used it with or without quotes but in any case, the link works but the attribute is skipped.
Is there a way to intercept this and add a target blank later?
I saw in other questions the use of router-link but I don't know how to manipulate the props content in the first place.
Any clue would be warmly welcomed
Edit: adding more code to give a clearer explanation of the problem I try to solve:
In the template:
<read-more more-str="read more" :text="dwId.texte" :link="dwId.link" less-str="less" :max-chars="540"></read-more>
I get the values from a DB with Axios. The props are specified by the plugin documentation.
The :link must be a string and it's what it gets from the DB. It works. But as I explained, I need to open in a new tab.
Edit: what I tried:
I try to make a computed property that would add the target blank to a string and use it in the read-more props:
computed: {
target: function() {
return this.dwIds.filter((dwId) => {
return dwId.link + target="_blank"
});
},
}
I have two issues here: first , the result is an object and the props requires a string. Furthermore, the way I add the target blank is not correct but I can't find the right syntax yet.
You need to use it as a directive, and override parts of the initial element you're passing. Otherwise there is no way to "intercept" it. Here's the code to the "component" version that won't do the trick for you.
I am using vue multiselect plugin in my Vue v.1x project. I am wondering how can I customise suggestion text like Press enter to select or Press enter to remove, when hovering over options?
You can see the example in the fiddle. I have tried with setting the :selectLabel="Select" but that didn't work.
When sending props you need to use 'kebab-case'. So if the prop looks like selectLabel in the child, it should be pass like
:select-label="value"
Also, when sending the variable make sure to either to double quotes to send as a string, since the ':' before the prop tries to evaluate a variable.
Ex. The label should be 'Select'
:select-label="'Select'"
Ex. 2. The label should use a variable 'xyz' defined in the component
:select-label="xyz"
edit 2
I think the issue is how I'm referring to an array from a parent component. A fiddle is provided in the comments.
I have an app where we want to be able to add items to a menu_header. I have tried pushing to the bottom of the array but Vuejs doesn't seem to be detecting it.
I have read this section https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats and am trying to make this work but I'm not sure if this is possible.
Something like:
var obj = { name: "my name" }
menu_header.items.push(obj);
Do I need to use this.$set syntax? I really need to add into the middle of an array via splice.
edit 1
So this is a component that is recursive (ie a menu_header can have many menu_headers). I have tried adding a simple button in a menu_item to add to the parent component like this:
methods:{
addItem: function(){
var items = this.$parent.$data.menuHeader.menu_items;
var obj = { header: "my header", detail: "this detail"}
console.log("11 items length: " + items.length);
items.splice(1,0,obj);
console.log("22 items length: " + items.length);
},
The count of the number of items is incremented but the view doesn't rerender. This component is nested 3 levels deep (a Menu component has many MenuHeader components which can have many MenuItem components and also have many MenuHeader components). I'm pretty sure it's a reactivity / array issue - but not sure about exact problem.
Really the issue here was that you should use a key with a list in order for Vue to property render it in all cases and when you are iterating over a component you must use a key. The code in the fiddle is properly adding the elements to the array and Vue is detecting the changes, it just doesn't properly render the list because of it's update strategy. Using a key fixes that.
To that end I modified these lines in the template.
<div v-for="menu_header in menu.menu_headers" :key="menu_header.name">
and
<div v-for="(menu_item, idx) in menuHeader.menu_items" :key="menu_item.header">
The best key for these is some unique property of the object in the list. The above uses name and header, but I expect with real code you could come up with a better key.
It's best to get in the habit of always adding a key whenever you render a list in Vue.
According to the React Native Docs for ListView the signature for the renderRow function has the following signature:
(rowData, sectionID, rowID, highlightRow) => renderable
However, in the ScheduleView component in the F8App app by Facebook, PureListView which renders a ListView uses a renderRow function with this signature:
renderRow(session: Session, day: number)
How is this? What am I overlooking?
Because f8 app uses flow. See https://flowtype.org/
Ok, what I didn't realize was that it's the same row data and section ID that are being passed. I thought that it was completely customized data being passed instead but upon examination of the actual data it's now clear that the data is simply grouped by time (even though the param name is day) which really is just the section ID.
Then, as agent_hunt pointed out, they are typed using flow.