Problem: Trying out a simple demo for a custom tabgroup in Titanium Alloy. However, the compiler keeps failing with the message Could not find module: common. What I thought would be a straightforward test is anything but.
Titanium SDK: 3.1.3.GA
OS: iOS 7.x
controllers/index.js
var common = require('common');
function tabGroupClicked(e) {
common.tabGroupClicked(e);
}
Alloy.Globals.parent = $;
Alloy.Globals.tabGroup = $.tabGroup;
Alloy.Globals.selectedTab = $.tab1;
$.index.open();
controllers/common.js
exports.tabGroupClicked = function(e){
if (Alloy.Globals.selectedTab !== e.source){
// reset the selected tab
Alloy.Globals.previousTab = Alloy.Globals.selectedTab;
Alloy.Globals.selectedTab = e.source;
// change the selected flag
Alloy.Globals.previousTab.selected = false;
Alloy.Globals.selectedTab.selected = true;
// change the background image
Alloy.Globals.previousTab.backgroundImage = Alloy.Globals.previousTab.disabledImage;
Alloy.Globals.selectedTab.backgroundImage = Alloy.Globals.selectedTab.selectedImage;
// swapping the zindexes of the childTabs
Alloy.Globals.parent.getView(Alloy.Globals.previousTab.childTab).getView().zIndex=2;
Alloy.Globals.parent.getView(Alloy.Globals.selectedTab.childTab).getView().zIndex=3;
}
};
index.xml
<Alloy>
<Window id="index" class="container">
<View id="tabGroupWindow" zIndex="0" class="container">
<Require src="tabThreeView" id="tabThreeView"/>
<Require src="tabTwoView" id="tabTwoView"/>
<Require src="tabOneView" id="tabOneView" />
</View>
<!-- Custom tab group -->
<View id="tabGroup">
<View id="tab1" onClick="tabGroupClicked"></View>
<View id="tab2" onClick="tabGroupClicked"></View>
<View id="tab3" onClick="tabGroupClicked"></View>
</View>
</Window>
</Alloy>
Can anyone see anything that I'm obviously overlooking? I've cleaned the project, restarted Studio, scoured forums for any reference to this issue. Not finding a reference usually means I forgot some basic detail.
Your help is appreciated.
To use the require function, you have to create a service.
So the common.js module as you nammed it, has to be under this folder : app/lib. If it's not in the lib folder, it will not be recognized, and it will not be required.
You can find more help in this page.
Related
I'm creating a sign in screen and a create account screen on my application. I have buttons that go back and forth to each other. Both screens work fine individually. When I do this, there can often be a visual error like so:
My App.js Code:
const App = () => {
return (
<NavigationContainer theme={theme}>
<Stack.Navigator screenOptions={{ headerShown: false}} initialRouteName="CreateAccountScreen">
<Stack.Screen name ="CreateAccountScreen" component={CreateAccountScreen} />
<Stack.Screen name ="SignInScreen" component={ SignInScreen } />
</Stack.Navigator>
</NavigationContainer>
);
}
Code from each Screens button that goes back and forth:
onSignUpButtonPressed = () => {
navigation.navigate("SignInScreen")
}
onCreateAccountButtonPressed = () => {
navigation.navigate("CreateAccountScreen")
}
Displays seem to overlay themselves in a bad way
I've tried a bunch of things and this has happened on several screens...
Your initialRouteName is set up as we can see but on your Stack.Screen you also give it the Component attribute.
I did a test based on how my navigation looks and I did not get the visual bug you showed so I think if you removed the component attribute and maybe just put the component tag inside your Stack.Screen as shown below it might work. Just imagine my Home is your CreateAccountScreen.
<Stack.Navigator
initialRouteName='Home'
>
<Stack.Screen
name="Home"
options={{
headerShown: false,
}}
>
{props => <Home {...props} username='Bella' />}
</Stack.Screen>
You also dont have the code in your question to define Stack like this:
const Stack = createStackNavigator();
I have an array of images that I want to display in a component in react native.
I use map function to iterate over the array and display it. I also have a delete button on top of the image.
The relevant code is :
this.state.imgs.map(function(img,i){
return (
<View style={{alignItems:'center',justifyContent:'center', height:75, width:75, borderRadius:25}}>
<Image style={{position:'absolute',resizeMode:'cover', top:0,left:0, borderRadius:38,height:75, width:75, opacity:0.5}} source={{uri: img.path }} />
<TouchableHighlight onPress={() => this.removeItem(i)}>
<Image style={{}} source={require('./Images/images_asset65.png')} />
</TouchableHighlight>
</View>
);
})
The problem is the TouchableHighlight, where I have an event, when the event fires I get an error regarding "this" (undefined is not a function).
I know this is a scope problem but I cant figure it out.
Is the use of an arrow function is correct here?
If you want to use this inside your map function, you have to change to an arrow function so this points to the outer scope.
this.state.imgs.map((img, i) => {
return (
<View style={{alignItems:'center',justifyContent:'center', height:75, width:75, borderRadius:25}}>
<Image style={{position:'absolute',resizeMode:'cover', top:0,left:0, borderRadius:38,height:75, width:75, opacity:0.5}} source={{uri: img.path }} />
<TouchableHighlight onPress={() => this.removeItem(i)}>
<Image style={{}} source={require('./Images/images_asset65.png')} />
</TouchableHighlight>
</View>
);
})
When you use function keyword in your code, then you lose the context and function creates its own. If you use function it is better not to forget binding these functions with bind(this) so that these functions share the same context. So in your relevant code you should change your last line to }.bind(this)). It is better to remember using bind(this) somehow when using the function keyword, even the better option is not using function and stick with the goodies comes with ES6. Last but not least one should always read docs.
I am working on react-native <MultiSlider> component, but one thing i just want to know, how do i change the value when i am sliding.
Default Value:
Sliding Values:
Code:
constructor() {
super();
this.state = {
priceRange : [0,10],
};
}
sliderOnChangeValue(values){
return(
<Text style={Styles.filter_label_label}>0 - 35,000</Text>
);
}
<View>
<View>
<Text>PRICING</Text>
</View>
<View>
{this.sliderOnChangeValue()}
</View>
</View>
<MultiSlider
values={this.state.priceRange}
sliderLength={300}
onValuesChange={this.sliderOnChangeValue} />
So on the above code i am calling sliderOnChangeValue() function onValuesChange i want to change the <Text> component values on range change.
Please kindly go through my above post and let me know if you find any solution.
Thanks
I recommend you refamiliarize yourself with the basics of React. Your approach is rather fundamentally flawed.
Callback functions cannot render things, they must update your component's state and your render function should output the UI based on state and props.
Follow the React Native Slider example on the docs website. It's nearly exactly what you want.
Try below code:
values={[parseInt(this.state.multiSliderValue[0]), parseInt(this.state.multiSliderValue[1])]}
and notice above code
<MultiSlider
values={[parseInt(this.state.multiSliderValue[0]), parseInt(this.state.multiSliderValue[1])]}
sliderLength={290}
onValuesChangeFinish={this.multiSliderValuesChange}
selectedStyle={{backgroundColor: '#f5a540'}}
min={16}
markerStyle={{backgroundColor: '#f5a540'}}
max={99}
step={1}
snapped
/>
Its working with me.
I have installed FluentBootstrap v3.3.5 and Bootstrap v3.3.5 in my project, but this in this View, Html.Bootstrap() gives me a compilation error:
#using FluentBootstrap;
<h2>Test</h2>
<div>
<hr />
#using (var form = Html.Bootstrap().Form().Begin())
{
using (var inputGroup = form.InputGroup().Begin())
{
#inputGroup.InputGroupAddon("#")
#inputGroup.Input().SetPlaceholder("Username")
}
<br />
using (var inputGroup = form.InputGroup().Begin())
{
#inputGroup.Input()
#inputGroup.InputGroupAddon(".00")
}
<br />
using (var inputGroup = form.InputGroup().Begin())
{
#inputGroup.InputGroupAddon("$")
#inputGroup.Input()
#inputGroup.InputGroupAddon(".00")
}
}
</div>
I have also included FluentBootrap in the namespace section of the ~/Views/web.config.
What am I missing?
A bit of a necro-post I know but for those who also have this question:
You'll need to install FluentBootstrap.Mvc as well which has the Html helpers for Asp.Net MVC
If you include 3rd party libraries in your project that contain HTML helpers, you typically have to compile first before Visual Studio will recognize them. Until you compile, intellisense will show this error.
Unload/reload your project. VS will ask you to install 3rd party librairy after reload.
I have been trying to figure this out for ages and I am stumped.
I have the following XAML:
<TextBox x:Name="MyTextBox" Text="{Binding MyName, Mode=TwoWay}" Width="200">
<WinRtBehaviors:Interaction.Behaviors>
<Win8nl_Behavior:EventToCommandBehavior Event="TextChanged"
Command="TextChangedCommand"
CommandParameter="{Binding Text, ElementName=MyTextBox, Mode=OneWay}"/>
</WinRtBehaviors:Interaction.Behaviors>
</TextBox>
And in my View Model:
public ICommand TextChangedCommand
{
get
{
return new RelayCommand<string>((p) =>
{
var msg = new MessageDialog(string.Format("Hi there {0}", p));
msg.ShowAsync();
});
}
}
But the string value I am hoping to appear in the CommanParameter (p) is always null.
What am I doing wrong?
The best thing you can do is to pass in the text value as the CommandParameter.
Behaviors are not part of the Visual Tree, so they don't have access to the XAML scope and the capability to perform ElementName bindings. This blog post provides more details, and a suitable solution.